activeadmin 3.2.3 → 4.0.0.beta1

data/app/javascript/active_admin/features/has_many.js

@@ -0,0 +1,28 @@
+import Rails from '@rails/ujs';
+
+const hasManyRemoveClick = function(event) {
+  event.preventDefault()
+  const oldGroup = this.closest("fieldset")
+  if (oldGroup) {
+    oldGroup.remove()
+  }
+}
+
+Rails.delegate(document, "form .has-many-remove", "click", hasManyRemoveClick)
+
+const hasManyAddClick = function(event) {
+  event.preventDefault()
+  const parent = this.closest(".has-many-container")
+
+  let index = parseInt(parent.dataset.has_many_index || (parent.querySelectorAll('fieldset').length - 1), 10)
+  parent.dataset.has_many_index = ++index
+
+  const regex = new RegExp(this.dataset.placeholder, 'g')
+  const html = this.dataset.html.replace(regex, index)
+
+  const tempEl = document.createElement("div");
+  tempEl.innerHTML = html
+  this.before(tempEl.firstChild)
+}
+
+Rails.delegate(document, "form .has-many-add", "click", hasManyAddClick)

data/app/javascript/active_admin/features/main_menu.js

@@ -0,0 +1,12 @@
+import Rails from '@rails/ujs';
+
+const toggleMenu = function(event) {
+  const parent = this.parentNode
+  if (!("open" in parent.dataset)) {
+    parent.dataset.open = ""
+  } else {
+    delete parent.dataset.open
+  }
+}
+
+Rails.delegate(document, "#main-menu [data-menu-button]", "click", toggleMenu)

data/app/javascript/active_admin/features/per_page.js

@@ -0,0 +1,9 @@
+import Rails from '@rails/ujs';
+
+const setPerPage = function(event) {
+  const params = new URLSearchParams(window.location.search)
+  params.set("per_page", this.value)
+  window.location.search = params
+}
+
+Rails.delegate(document, ".pagination-per-page", "change", setPerPage)

data/app/javascript/active_admin/utils/dom.js

@@ -0,0 +1,17 @@
+const nextSibling = function next(element, selector) {
+  let sibling = element.nextElementSibling;
+
+  if (!selector) {
+    return sibling;
+  }
+
+  while (sibling) {
+    if (sibling && sibling.matches(selector)) {
+      return sibling;
+    }
+
+    sibling = sibling.nextElementSibling;
+  }
+}
+
+export { nextSibling }

data/app/javascript/active_admin.js

@@ -0,0 +1,10 @@
+import "flowbite"
+import Rails from "@rails/ujs"
+import "active_admin/features/batch_actions"
+import "active_admin/features/dark_mode_toggle"
+import "active_admin/features/has_many"
+import "active_admin/features/filters"
+import "active_admin/features/main_menu"
+import "active_admin/features/per_page"
+
+Rails.start()

data/app/views/active_admin/_flash_messages.html.erb

@@ -0,0 +1,22 @@
+<% if flash_messages.present? %>
+  <div class="px-2.5 lg:px-5 mb-8">
+    <% flash_messages.each do |type, message| %>
+      <% if type == "error" %>
+        <div class="flex items-center gap-3 p-4 mb-2 rounded-lg bg-red-50 text-red-800 dark:bg-red-800 dark:text-red-300">
+          <svg class="w-5 h-5 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/></svg>
+          <%= message %>
+        </div>
+      <% elsif type == "alert" %>
+        <div class="flex items-center gap-3 p-4 mb-2 rounded-lg bg-yellow-50 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-300">
+          <svg class="w-5 h-5 shrink-0 rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/></svg>
+          <%= message %>
+        </div>
+      <% elsif type == "notice" %>
+        <div class="flex items-center gap-3 p-4 mb-2 rounded-lg bg-green-50 text-green-800 dark:bg-green-800 dark:text-green-400">
+          <svg class="w-5 h-5 shrink-0 rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/></svg>
+          <%= message %>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

data/app/views/active_admin/_html_head.html.erb

@@ -0,0 +1,13 @@
+<%= stylesheet_link_tag "active_admin" %>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<%= csrf_meta_tags %>
+<%= csp_meta_tag %>
+<% # On page load or when changing themes, best to add inline in `head` to avoid FOUC %>
+<%= javascript_tag nonce: true do %>
+  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.classList.remove('dark')
+  }
+<% end %>
+<%= javascript_importmap_tags "active_admin", importmap: ActiveAdmin.importmap %>

data/app/views/active_admin/_main_navigation.html.erb

@@ -0,0 +1,28 @@
+<div id="main-menu" class="fixed top-0 xl:top-16 bottom-0 start-0 z-40 w-72 xl:w-60 p-4 overflow-y-auto transition-transform duration-200 -translate-x-full xl:translate-x-0 bg-white dark:bg-gray-950 xl:border-e xl:border-gray-200 xl:dark:border-white/10" tabindex="-1" aria-labelledby="drawer-navigation-label">
+  <ul role="list" class="flex flex-1 flex-col space-y-1.5">
+    <% current_menu.items(self).each do |item| %>
+      <% children = item.items(self).presence %>
+      <li <%= current_menu_item?(item) && "data-open" %> class="group" data-item-id="<%= item.id %>">
+        <% if children %>
+          <button data-menu-button class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white flex items-center w-full rounded-md p-2 gap-x-2 text-sm">
+            <%= item.label(self) %>
+            <svg class="group-data-[open]:rotate-90 group-data-[open]:rtl:-rotate-90 ms-auto h-5 w-5 shrink-0 rtl:-scale-x-100" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+            </svg>
+          </button>
+          <ul role="list" class="mt-1 space-y-1 hidden group-data-[open]:block">
+            <% children.each do |j| %>
+              <li data-item-id="<%= j.id %>">
+                <%= link_to j.label(self), j.url(self), j.html_options.merge(class: "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white block rounded-md py-1.5 px-2 text-sm no-underline #{(current_menu_item?(j) ? "bg-gray-100 dark:bg-white/5 text-gray-900 dark:text-white selected" : "")}") %>
+              </li>
+            <% end %>
+          </ul>
+        <% elsif url = item.url(self) %>
+          <%= link_to item.label(self), url, item.html_options.merge(class: "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white flex items-center w-full rounded-md p-2 gap-x-2 text-sm no-underline #{(current_menu_item?(item) ? "bg-gray-100 dark:bg-white/5 text-gray-900 dark:text-white selected" : "")}") %>
+        <% else %>
+          <%= item.label(self) %>
+        <% end %>
+      </li>
+    <% end %>
+  </ul>
+</div>

data/app/views/active_admin/_page_header.html.erb

@@ -0,0 +1,27 @@
+<div data-test-page-header class="bg-gray-50 border-b p-4 mb-8 flex flex-col gap-4 md:flex-row md:items-center justify-between dark:border-gray-800/50 dark:bg-inherit">
+  <div class="flex flex-col gap-3 pt-1">
+    <% breadcrumb_links = build_breadcrumb_links(request.path, class: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 no-underline") %>
+    <% if breadcrumb_links.present? %>
+      <nav aria-label="breadcrumb">
+        <ol class="flex flex-wrap gap-1 text-sm">
+          <% breadcrumb_links.each_with_index do |link, index| %>
+            <li class="inline-flex items-center h-5 gap-1">
+              <% if index > 0 %>
+                <svg class="h-5 w-5 text-gray-300 dark:text-gray-700 flex-shrink-0 rtl:rotate-180" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"/>
+                </svg>
+              <% end %>
+              <%= link %>
+            </li>
+          <% end %>
+        </ol>
+      </nav>
+    <% end %>
+    <h2 class="text-2xl font-semibold"><%= title %></h2>
+  </div>
+  <% if action_items_for_action.present? %>
+    <div data-test-action-items class="flex gap-2 flex-wrap lg:justify-end">
+      <%= render "active_admin/shared/action_items" %>
+    </div>
+  <% end %>
+</div>

data/app/views/active_admin/_sidebar.html.erb

@@ -0,0 +1,5 @@
+<% unless skip_sidebar? || sidebar_sections_for_action.blank? %>
+  <div class="space-y-8">
+    <%= render "active_admin/shared/sidebar_sections" %>
+  </div>
+<% end %>

data/app/views/active_admin/_site_footer.html.erb

@@ -0,0 +1,7 @@
+<div class="text-sm text-center mt-16 mx-8 pt-9 pb-12 text-gray-500 border-t dark:border-gray-800">
+  <%= I18n.t(
+        "active_admin.powered_by",
+        active_admin: link_to("Active Admin", "https://activeadmin.info", class: "text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-gray-400 no-underline"),
+        version: ActiveAdmin::VERSION
+      ).html_safe %>
+</div>

data/app/views/active_admin/_site_header.html.erb

@@ -0,0 +1,30 @@
+<div class="border-b border-gray-200 dark:border-white/10 dark:bg-gray-950/75 px-4 py-2 flex items-center sticky top-0 z-20 h-16 w-full backdrop-blur-md">
+  <button class="xl:hidden pe-3 inline-flex items-center w-8 h-8 justify-center text-sm text-gray-500 dark:text-gray-400 focus-visible:outline-none focus-visible:ring-ring focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0" data-drawer-target="main-menu" data-drawer-show="main-menu" aria-controls="drawer-navigation">
+    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/></svg>
+  </button>
+
+  <div class="grow">
+    <h1 data-test-site-title class="text-lg font-semibold">
+      <%= title %>
+    </h1>
+  </div>
+
+  <button type="button" class="dark-mode-toggle flex items-center w-9 h-9 justify-center me-1 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 focus:outline-none text-sm">
+    <svg class="hidden dark:block w-5 h-5 rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.509 5.75c0-1.493.394-2.96 1.144-4.25h-.081a8.5 8.5 0 1 0 7.356 12.746A8.5 8.5 0 0 1 8.509 5.75Z"/></svg>
+    <svg class="dark:hidden w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 3V1m0 18v-2M5.05 5.05 3.636 3.636m12.728 12.728L14.95 14.95M3 10H1m18 0h-2M5.05 14.95l-1.414 1.414M16.364 3.636 14.95 5.05M14 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/></svg>
+  </button>
+
+  <button id="user-menu-button" class="flex items-center w-9 h-9 justify-center text-sm text-gray-500 focus:outline-none dark:text-gray-200" data-dropdown-toggle="user-menu" data-dropdown-offset-distance="3" data-dropdown-placement="bottom-end">
+    <svg class="w-7 h-7" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/></svg>
+  </button>
+
+  <div id="user-menu" class="z-50 hidden min-w-max bg-white rounded shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-700 py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="user-menu-button">
+    <ul>
+      <% if current_active_admin_user? %>
+        <li><%= auto_link current_active_admin_user, class: "block px-2.5 py-2 no-underline text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white" %></li>
+        <li><%= link_to I18n.t("active_admin.logout"), auto_logout_link_path, class: "block px-2.5 py-2 no-underline text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white", data: { method: :delete } %></li>
+      <% end %>
+    </ul>
+  </div>
+
+</div>

data/app/views/active_admin/devise/confirmations/new.html.erb

@@ -1,5 +1,7 @@
-<div id="login">
-  <h2><%= active_admin_application.site_title(self) %> <%= title t('active_admin.devise.resend_confirmation_instructions.title') %></h2>
+<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800 dark:border-gray-700">
+  <h2 class="text-xl font-bold text-gray-900 md:text-2xl dark:text-white">
+    <%= active_admin_application.site_title(self) %> <%= set_page_title t('active_admin.devise.resend_confirmation_instructions.title') %>
+  </h2>
 
   <%= render partial: "active_admin/devise/shared/error_messages", resource: resource %>
   <%= active_admin_form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f|
@@ -7,7 +9,7 @@
       f.input :email
     end
     f.actions do
-      f.action :submit, label: t('active_admin.devise.resend_confirmation_instructions.submit'), button_html: { value: t('active_admin.devise.resend_confirmation_instructions.submit') }
+      f.action :submit, label: t('active_admin.devise.resend_confirmation_instructions.submit'), button_html: { class: "w-full", value: t('active_admin.devise.resend_confirmation_instructions.submit') }
     end
   end %>
 

data/app/views/active_admin/devise/passwords/edit.html.erb

@@ -1,5 +1,7 @@
-<div id="login">
-  <h2><%= active_admin_application.site_title(self) %> <%= title t('active_admin.devise.change_password.title') %></h2>
+<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800 dark:border-gray-700">
+  <h2 class="text-xl font-bold text-gray-900 md:text-2xl dark:text-white">
+    <%= active_admin_application.site_title(self) %> <%= set_page_title t('active_admin.devise.change_password.title') %>
+  </h2>
 
   <%= render partial: "active_admin/devise/shared/error_messages", resource: resource %>
   <%= active_admin_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f|
@@ -9,7 +11,7 @@
       f.input :reset_password_token, as: :hidden, input_html: { value: resource.reset_password_token }
     end
     f.actions do
-      f.action :submit, label: t('active_admin.devise.change_password.submit'), button_html: { value: t('active_admin.devise.change_password.submit') }
+      f.action :submit, label: t('active_admin.devise.change_password.submit'), button_html: { class: "w-full", value: t('active_admin.devise.change_password.submit') }
     end
   end
   %>

data/app/views/active_admin/devise/passwords/new.html.erb

@@ -1,13 +1,14 @@
-<div id="login">
-  <h2><%= active_admin_application.site_title(self) %> <%= title t('active_admin.devise.reset_password.title') %></h2>
+<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800 dark:border-gray-700">
+  <h2 class="text-xl font-bold text-gray-900 md:text-2xl dark:text-white">
+    <%= active_admin_application.site_title(self) %> <%= set_page_title t('active_admin.devise.reset_password.title') %>
+  </h2>
 
-  <%= render partial: "active_admin/devise/shared/error_messages", resource: resource %>
   <%= active_admin_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
     f.inputs do
       f.input :email
     end
     f.actions do
-      f.action :submit, label: t('active_admin.devise.reset_password.submit'), button_html: { value: t('active_admin.devise.reset_password.submit') }
+      f.action :submit, label: t('active_admin.devise.reset_password.submit'), button_html: { class: "w-full", value: t('active_admin.devise.reset_password.submit') }
     end
   end %>
 

data/app/views/active_admin/devise/registrations/new.html.erb

@@ -1,9 +1,11 @@
-<div id="login">
-  <h2><%= active_admin_application.site_title(self) %> <%= title t('active_admin.devise.sign_up.title') %></h2>
+<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800 dark:border-gray-700">
+  <h2 class="text-xl font-bold text-gray-900 md:text-2xl dark:text-white">
+    <%= active_admin_application.site_title(self) %> <%= set_page_title t('active_admin.devise.sign_up.title') %>
+  </h2>
 
   <% scope = Devise::Mapping.find_scope!(resource_name) %>
   <%= render partial: "active_admin/devise/shared/error_messages", resource: resource %>
-  <%= active_admin_form_for(resource, as: resource_name, url: send(:"#{scope}_registration_path"), html: { id: "registration_new" }) do |f|
+  <%= active_admin_form_for(resource, as: resource_name, url: main_app.send(:"#{scope}_registration_path"), html: { id: "registration_new" }) do |f|
     f.inputs do
       resource.class.authentication_keys.each_with_index { |key, index|
         f.input key, label: t('active_admin.devise.'+key.to_s+'.title'), input_html: { autofocus: index.zero? }
@@ -12,7 +14,7 @@
       f.input :password_confirmation, label: t('active_admin.devise.password_confirmation.title')
     end
     f.actions do
-      f.action :submit, label: t('active_admin.devise.login.submit'), button_html: { value: t('active_admin.devise.sign_up.submit') }
+      f.action :submit, label: t('active_admin.devise.login.submit'), button_html: { class: "w-full", value: t('active_admin.devise.sign_up.submit') }
     end
   end
   %>

data/app/views/active_admin/devise/sessions/new.html.erb

@@ -1,8 +1,10 @@
-<div id="login">
-  <h2><%= active_admin_application.site_title(self) %> <%= title t('active_admin.devise.login.title') %></h2>
+<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800 dark:border-gray-700">
+  <h2 class="text-xl font-bold text-gray-900 md:text-2xl dark:text-white">
+    <%= site_title %> <%= set_page_title t('active_admin.devise.login.title') %>
+  </h2>
 
   <% scope = Devise::Mapping.find_scope!(resource_name) %>
-  <%= active_admin_form_for(resource, as: resource_name, url: send(:"#{scope}_session_path"), html: { id: "session_new" }) do |f|
+  <%= active_admin_form_for(resource, as: resource_name, url: main_app.send(:"#{scope}_session_path")) do |f|
     f.inputs do
       resource.class.authentication_keys.each_with_index { |key, index|
         f.input key, label: t("active_admin.devise.#{key}.title"), input_html: { autofocus: index.zero? }
@@ -11,7 +13,7 @@
       f.input :remember_me, label: t('active_admin.devise.login.remember_me'), as: :boolean if devise_mapping.rememberable?
     end
     f.actions do
-      f.action :submit, label: t('active_admin.devise.login.submit'), button_html: { value: t('active_admin.devise.login.submit') }
+      f.action :submit, label: t('active_admin.devise.login.submit'), wrapper_html: { class: "grow" }, button_html: { class: "w-full", value: t('active_admin.devise.login.submit') }
     end
   end
   %>

data/app/views/active_admin/devise/shared/_links.erb

@@ -1,6 +1,7 @@
+<div class="mt-6 text-sm">
 <%- if controller_name != 'sessions' %>
   <% scope = Devise::Mapping.find_scope!(resource_name) %>
-  <%= link_to t('active_admin.devise.links.sign_in'), send(:"new_#{scope}_session_path") %>
+  <%= link_to t('active_admin.devise.links.sign_in'), main_app.send(:"new_#{scope}_session_path") %>
   <br>
 <% end -%>
 
@@ -31,3 +32,4 @@
     <br>
   <% end -%>
 <% end -%>
+</div>

data/app/views/active_admin/devise/unlocks/new.html.erb

@@ -1,5 +1,7 @@
-<div id="login">
-  <h2><%= active_admin_application.site_title(self) %> <%= title t('active_admin.devise.unlock.title') %></h2>
+<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800 dark:border-gray-700">
+  <h2 class="text-xl font-bold text-gray-900 md:text-2xl dark:text-white">
+    <%= site_title %> <%= set_page_title t('active_admin.devise.unlock.title') %>
+  </h2>
 
   <%= render partial: "active_admin/devise/shared/error_messages", resource: resource %>
   <%= active_admin_form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f|
@@ -7,9 +9,9 @@
       f.input :email
     end
     f.actions do
-      f.action :submit, label: t('active_admin.devise.unlock.submit'), button_html: { value: t('active_admin.devise.unlock.submit') }
+      f.action :submit, label: t('active_admin.devise.unlock.submit'), button_html: { class: "w-full", value: t('active_admin.devise.unlock.submit') }
     end
   end %>
 
-<%= render partial: "active_admin/devise/shared/links" %>
+  <%= render partial: "active_admin/devise/shared/links" %>
 </div>

data/app/views/{kaminari/active_admin_countless → active_admin/kaminari}/_gap.html.erb

@@ -5,4 +5,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="page gap"><%= t('views.pagination.truncate').html_safe %></span>
+<span class="flex items-center justify-center px-2.5 py-3 h-8 leading-tight text-gray-500 dark:text-gray-400">
+  <%= t('views.pagination.truncate').html_safe %>
+</span>

data/app/views/active_admin/kaminari/_next_page.html.erb

@@ -0,0 +1,16 @@
+<%# Link to the "Next" page
+  - available local variables
+    url:           url to the next page
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<% unless current_page.last? %>
+  <%= link_to url, rel: 'next', remote: remote, class: "flex items-center justify-center px-2.5 py-3 h-8 leading-tight text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-white rounded no-underline" do %>
+    <span class="sr-only"><%= t('views.pagination.next').html_safe %></span>
+    <svg class="w-2.5 h-2.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
+    </svg>
+  <% end %>
+<% end %>

data/app/views/active_admin/kaminari/_page.html.erb

@@ -0,0 +1,14 @@
+<%# Link showing page number
+  - available local variables
+    page:          a page object for "this" page
+    url:           url to this page
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<% if page.current? %>
+  <%= link_to page, url, { remote: remote, rel: page.rel, class: "flex items-center justify-center px-2.5 py-3 h-8 leading-tight text-white bg-blue-500 dark:text-white dark:bg-blue-600 hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white rounded no-underline" } %>
+<% else %>
+  <%= link_to page, url, { remote: remote, rel: page.rel, class: "flex items-center justify-center px-2.5 py-3 h-8 leading-tight text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-white rounded no-underline" } %>
+<% end %>

data/app/views/{kaminari/active_admin_countless → active_admin/kaminari}/_paginator.html.erb

@@ -7,8 +7,7 @@
     paginator:     the paginator that renders the pagination tags inside
 -%>
 <%= paginator.render do -%>
-  <nav class="pagination">
-    <%= first_page_tag unless current_page.first? %>
+  <nav data-test-pagination class="inline-flex flex-wrap -space-x-px text-sm gap-1">
     <%= prev_page_tag unless current_page.first? %>
     <% each_page do |page| -%>
       <% if page.display_tag? -%>

data/app/views/active_admin/kaminari/_prev_page.html.erb

@@ -0,0 +1,16 @@
+<%# Link to the "Previous" page
+  - available local variables
+    url:           url to the previous page
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<% unless current_page.first? %>
+  <%= link_to url, rel: 'prev', remote: remote, class: "flex items-center justify-center px-2.5 py-3 h-8 leading-tight text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-white rounded no-underline" do %>
+    <span class="sr-only"><%= t('views.pagination.previous').html_safe %></span>
+    <svg class="w-2.5 h-2.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
+    </svg>
+  <% end %>
+<% end %>

data/app/views/active_admin/page/index.html.arb

@@ -1,2 +1,6 @@
 # frozen_string_literal: true
-insert_tag active_admin_application.view_factory["page"]
+div class: "main-content-container" do
+  if page_presenter.block
+    instance_exec &page_presenter.block
+  end
+end

data/app/views/active_admin/resource/_active_filters.html.erb

@@ -0,0 +1,32 @@
+<div class="active-filters">
+  <h3 class="active-filters-title">
+    <% if current_scope %>
+      <%= I18n.t("active_admin.search_status.title_with_scope", name: scope_name(current_scope)) %>
+    <% else %>
+      <%= I18n.t("active_admin.search_status.title") %>
+    <% end %>
+  </h3>
+  <ul class="active-filters-list">
+    <% if active_filters.all_blank? %>
+      <li><%= I18n.t("active_admin.search_status.no_current_filters") %></li>
+    <% else %>
+      <% active_filters.filters.each do |filter| %>
+        <%= content_tag :li, filter.html_options do %>
+          <span>
+            <%= filter.label %>
+            <strong><%= to_sentence(filter.values.map { |v| pretty_format(v) }) %></strong>
+          </span>
+        <% end %>
+      <% end %>
+      <% active_filters.scopes.each do |name, value| %>
+        <% filter_name = name.gsub(/_eq$/, "") %>
+        <% filter = active_admin_config.filters[filter_name.to_sym] %>
+        <% label = filter.try(:[], :label) || filter_name.titleize %>
+        <li data-filter="<%= name %>">
+          <span><%= "#{label} #{Ransack::Translate.predicate('eq')}" %></span>
+          <strong><%= value %></strong>
+        </li>
+      <% end %>
+    <% end %>
+  </ul>
+</div>

data/app/views/active_admin/resource/_batch_actions_dropdown.html.erb

@@ -0,0 +1,19 @@
+<% if batch_actions_to_display.any? %>
+  <div class="batch-actions-dropdown">
+    <button type="button" class="batch-actions-dropdown-toggle" data-dropdown-toggle="batch-action-menu" disabled data-dropdown-offset-distance="5" data-dropdown-placement="bottom-start">
+      <%= I18n.t("active_admin.batch_actions.button_label") %>
+      <svg class="batch-actions-dropdown-arrow" aria-hidden="true" fill="none" viewBox="0 0 10 6"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/></svg>
+    </button>
+    <ul class="batch-actions-dropdown-menu" id="batch-action-menu">
+      <% batch_actions_to_display.each do |batch_action| %>
+        <li>
+          <% confirmation_text = render_or_call_method_or_proc_on(self, batch_action.confirm) %>
+          <% default_title = render_or_call_method_or_proc_on(self, batch_action.title) %>
+          <% title = I18n.t("active_admin.batch_actions.labels.#{batch_action.sym}", default: default_title) %>
+          <% label = I18n.t("active_admin.batch_actions.action_label", title: title) %>
+          <%= link_to(label, "#", batch_action.link_html_options.merge(data: { action: batch_action.sym, confirm: confirmation_text.presence, batch_action_item: "" })) %>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+<% end %>

data/app/views/active_admin/resource/_form.html.arb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+div class: "main-content-container" do
+  if page_presenter.block
+    options = {
+      url: resource.persisted? ? resource_path(resource) : collection_path,
+      as: active_admin_config.param_key
+    }
+    options.merge!(page_presenter.options)
+
+    active_admin_form_for(resource, options, &page_presenter.block)
+  elsif page_presenter.options[:partial].present?
+    render page_presenter.options[:partial]
+  else
+    render "form_default"
+  end
+end

data/app/views/active_admin/resource/_form_default.html.arb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+options = {
+  url: resource.persisted? ? resource_path(resource) : collection_path,
+  as: active_admin_config.param_key
+}
+options.merge!(page_presenter.options)
+
+active_admin_form_for(resource, options) do |f|
+  f.semantic_errors # show errors on :base by default
+  f.inputs
+  f.actions
+end

data/app/views/active_admin/resource/_index_as_table_default.html.arb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+insert_tag(ActiveAdmin::Views::IndexAsTable::IndexTableFor, collection, table_options) do |t|
+  selectable_column
+  id_column if resource_class.primary_key
+  active_admin_config.resource_columns.each do |attribute|
+    column attribute
+  end
+  actions
+end

data/app/views/active_admin/resource/_index_blank_slate.html.erb

@@ -0,0 +1,14 @@
+<div class="w-full rounded-lg border-2 border-dashed border-gray-300 hover:border-gray-400 dark:border-gray-700 dark:hover:border-gray-600 px-6 py-12 text-center">
+  <h2 class="block mb-4 only:mb-0 font-semibold leading-6 text-gray-900 dark:text-gray-200">
+    <%= I18n.t("active_admin.blank_slate.content", resource_name: active_admin_config.plural_resource_label) %>
+  </h2>
+  <% if new_action_authorized?(active_admin_config.resource_class) %>
+    <%= if page_presenter.options.has_key?(:blank_slate_link)
+          link = page_presenter.options[:blank_slate_link]
+          instance_exec(&link) if link.is_a?(Proc)
+        else
+          link_to(I18n.t("active_admin.blank_slate.link"), new_resource_path)
+        end
+    %>
+  <% end %>
+</div>

data/app/views/active_admin/resource/_index_empty_results.html.erb

@@ -0,0 +1,5 @@
+<div class="w-full rounded-lg border-2 border-dashed border-gray-300 hover:border-gray-400 dark:border-gray-700 dark:hover:border-gray-600 px-6 py-12 text-center min-h-20">
+  <h2 class="block mb-4 only:mb-0 font-semibold leading-6 text-gray-900 dark:text-gray-200">
+    <%= I18n.t("active_admin.pagination.empty", model: active_admin_config.plural_resource_label) %>
+  </h2>
+</div>

data/app/views/active_admin/resource/_index_table_actions_default.html.erb

@@ -0,0 +1,9 @@
+<% if show_action_authorized?(resource) %>
+  <%= link_to view_label, resource_path(resource) %>
+<% end %>
+<% if edit_action_authorized?(resource) %>
+  <%= link_to edit_label, edit_resource_path(resource) %>
+<% end %>
+<% if destroy_action_authorized?(resource) %>
+  <%= link_to delete_label, resource_path(resource), method: :delete, data: { confirm: delete_confirmation_text } %>
+<% end %>

data/app/views/active_admin/resource/_show_default.html.arb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+attributes_table_for(resource, *active_admin_config.resource_columns)
+active_admin_comments_for(resource) if active_admin_config.comments?

data/app/views/active_admin/resource/edit.html.arb

@@ -1,2 +1,2 @@
 # frozen_string_literal: true
-insert_tag renderer_for(:edit)
+render "form"