madmin 1.2.11 → 2.0.0

data/app/controllers/madmin/application_controller.rb

@@ -1,22 +1,17 @@
 module Madmin
   class ApplicationController < Madmin::BaseController
+    include Rails.application.routes.url_helpers
+
     before_action :authenticate_admin_user
 
     def authenticate_admin_user
       # TODO: Add your authentication logic here
 
-      # For example, we could redirect if the user isn't an admin
-      # redirect_to "/", alert: "Not authorized." unless user_signed_in? && current_user.admin?
-    end
-
-    # Authenticate with Clearance
-    # include Clearance::Controller
-    # before_action :require_login
+      # For example, with Rails 8 authentication
+      # redirect_to "/", alert: "Not authorized." unless authenticated? && Current.user.admin?
 
-    # Authenticate with Devise
-    # before_action :authenticate_user!
-
-    # Authenticate with Basic Auth
-    # http_basic_authenticate_with(name: Rails.application.credentials.admin_username, password: Rails.application.credentials.admin_password)
+      # Or with Devise
+      # redirect_to "/", alert: "Not authorized." unless current_user&.admin?
+    end
   end
 end

data/app/controllers/madmin/base_controller.rb

@@ -1,5 +1,6 @@
 module Madmin
   class BaseController < ActionController::Base
+    include ::ActiveStorage::SetCurrent if defined?(::ActiveStorage)
     include Pagy::Backend
 
     protect_from_forgery with: :exception

data/app/helpers/madmin/application_helper.rb

@@ -1,18 +1,7 @@
 module Madmin
   module ApplicationHelper
     include Pagy::Frontend
-
-    # Converts a Rails version to a NPM version
-    def npm_rails_version
-      version = [
-        Rails::VERSION::MAJOR,
-        Rails::VERSION::MINOR,
-        Rails::VERSION::TINY
-      ].join(".")
-
-      version += "-#{Rails::VERSION::PRE}" if Rails::VERSION::PRE
-      version
-    end
+    include Rails.application.routes.url_helpers
 
     def clear_search_params
       resource.index_path(sort: params[:sort], direction: params[:direction])

data/app/helpers/madmin/sort_helper.rb

@@ -8,7 +8,7 @@ module Madmin
         concat title
         if matching_column
           concat " "
-          concat tag.i((sort_direction == "asc") ? "▲" : "▼")
+          concat tag.span((sort_direction == "asc") ? asc_icon : desc_icon)
         end
       end
     end
@@ -28,5 +28,21 @@ module Madmin
     def default_sort_direction
       resource.try(:default_sort_direction) || "desc"
     end
+
+    def asc_icon
+      <<~SVG.html_safe
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" height="1rem" width="1rem">
+          <path fill-rule="evenodd" d="M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z" clip-rule="evenodd" />
+        </svg>
+      SVG
+    end
+
+    def desc_icon
+      <<~SVG.html_safe
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" height="1rem" width="1rem">
+          <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+        </svg>
+      SVG
+    end
   end
 end

data/app/javascript/madmin/application.js

@@ -0,0 +1,4 @@
+import "@hotwired/turbo-rails"
+import "trix"
+import "@rails/actiontext"
+import "controllers"

data/app/javascript/madmin/controllers/application.js

@@ -0,0 +1,12 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }
+
+import { Dropdown } from "tailwindcss-stimulus-components"
+application.register("dropdown", Dropdown)

data/app/javascript/madmin/controllers/index.js

@@ -0,0 +1,5 @@
+import { application } from "controllers/application"
+
+// Eager load all controllers defined in the import map under controllers/**/*_controller
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)

data/app/javascript/madmin/controllers/nested_form_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static get targets() {
+    return [ "links", "template" ]
+  }
+
+  connect() {
+    this.wrapperClass = this.data.get("wrapperClass") || "nested-fields"
+  }
+
+  add_association(event) {
+    event.preventDefault()
+
+    var content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime())
+    this.linksTarget.insertAdjacentHTML('beforebegin', content)
+  }
+
+  remove_association(event) {
+    event.preventDefault()
+
+    let wrapper = event.target.closest("." + this.wrapperClass)
+
+    // New records are simply removed from the page
+    if (wrapper.dataset.newRecord == "true") {
+      wrapper.remove()
+
+      // Existing records are hidden and flagged for deletion
+    } else {
+      wrapper.querySelector("input[name*='_destroy']").value = 1
+      wrapper.style.display = 'none'
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+import TomSelect from "tom-select"
+
+export default class extends Controller {
+  static values = {
+    options: Object,
+    url: String
+  }
+
+  connect() {
+    this.select = new TomSelect(this.element, {
+      plugins: ['remove_button'],
+      valueField: 'id',
+      labelField: 'name',
+      searchField: 'name',
+      load: (search, callback) => {
+        let url = search ? `${this.urlValue}?q=${search}` : this.urlValue;
+        fetch(url)
+          .then(response => response.json())
+          .then(json => {
+            callback(json);
+          }).catch(() => {
+            callback();
+          });
+      }
+    })
+  }
+
+  disconnect() {
+    this.select.destroy()
+  }
+}

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

@@ -5,22 +5,20 @@
     <meta name="ROBOTS" content="NOODP">
     <meta name="viewport" content="initial-scale=1">
     <title>
-      Madmin: <%= Rails.application.class %>
+      <% if content_for? :title %>
+        <%= yield(:title) %> -
+      <% end %>
+      <%= Madmin.site_name %> Admin
     </title>
-
     <%= csrf_meta_tags %>
-
     <%= render "javascript" %>
   </head>
-  <body class="min-h-screen">
-    <div class="md:flex w-full min-h-screen">
-      <div id="sidebar" class="md:w-64 p-4 flex-shrink-0 border-r">
-        <%= render "navigation" -%>
-      </div>
-      <main class="flex-grow p-4 overflow-x-scroll" role="main">
-        <%#= render "flashes" -%>
-        <%= yield %>
-      </main>
-    </div>
+  <body>
+    <aside id="sidebar">
+      <%= render "navigation" %>
+    </aside>
+    <main>
+      <%= yield %>
+    </main>
   </body>
 </html>

data/app/views/madmin/application/_form.html.erb

@@ -1,23 +1,24 @@
 <%= form_with model: [:madmin, record], url: (record.persisted? ? resource.show_path(record) : resource.index_path), local: true do |form| %>
   <% if form.object.errors.any? %>
-    <div class="mb-4 rounded-md text-sm text-red-700 bg-red-100 p-4">
-      <div class="mb-2 font-medium leading-5 text-red-800">There was <%= pluralize form.object.errors.full_messages.count, "error" %> with your submission</div>
+    <div class="alert alert-danger">
+      <div class="">There was <%= pluralize form.object.errors.full_messages.count, "error" %> with your submission:</div>
 
-      <% form.object.errors.full_messages.each do |message| %>
-        <div class="ml-4"><%= message %></div>
-      <% end %>
+      <ul>
+        <% form.object.errors.full_messages.each do |message| %>
+          <li><%= message %></li>
+        <% end %>
+      </ul>
     </div>
   <% end %>
 
-  <% resource.attributes.values.each do |attribute| %>
-    <% next if attribute.field.nil? %>
-    <% next unless attribute.field.visible?(action_name) %>
-    <% next unless attribute.field.visible?(:form) %>
-
-    <div class="mb-4 md:flex">
+  <% resource.attributes.values.select{ _1.field.present? && _1.field.visible?(action_name) }.each do |attribute| %>
+    <div class="form-group">
+      <%= render "madmin/shared/label", form: form, field: attribute.field %>
       <%= render partial: attribute.field.to_partial_path("form"), locals: { field: attribute.field, record: record, form: form, resource: resource } %>
+      <%= tag.div attribute.field.options.description, class: "form-description" if attribute.field.options.description.present? %>
     </div>
   <% end %>
 
-  <%= form.submit class: "bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" %>
+  <%= form.submit class: "btn btn-primary" %>
+  <%= link_to "Cancel", (record.persisted? ? resource.show_path(record) : resource.index_path), class: "btn" %>
 <% end %>

data/app/views/madmin/application/_javascript.html.erb

@@ -1,138 +1,5 @@
-<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
+<%= javascript_importmap_tags "application", importmap: Madmin.importmap %>
+
+<%= stylesheet_link_tag "madmin/application", "data-turbo-track": "reload" %>
 <%= stylesheet_link_tag "https://unpkg.com/flatpickr/dist/flatpickr.min.css", "data-turbo-track": "reload" %>
-<%= stylesheet_link_tag "https://unpkg.com/trix/dist/trix.css", "data-turbo-track": "reload" %>
 <%= stylesheet_link_tag "https://unpkg.com/tom-select/dist/css/tom-select.min.css", "data-turbo-track": "reload" %>
-<style type="text/tailwindcss">
-.pagy {
-  @apply isolate inline-flex rounded-md;
-
-  a:first-child {
-    @apply rounded-l-md;
-  }
-  a:last-child {
-    @apply rounded-r-md;
-  }
-
-  a {
-    @apply relative -ml-px inline-flex items-center bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-100 focus:z-10;
-
-    &:not([href]) {
-      @apply text-gray-300 cursor-default;
-    }
-
-    &.current {
-      @apply text-white bg-blue-500 ring-blue-500;
-    }
-  }
-
-  label {
-    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
-    input {
-      @apply bg-gray-100 border-none rounded-md;
-    }
-  }
-}
-</style>
-
-<script type="importmap" data-turbo-track="reload">
-  {
-    "imports": {
-      "@hotwired/stimulus": "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js",
-      "@hotwired/turbo": "https://unpkg.com/@hotwired/turbo",
-      "@hotwired/turbo-rails": "https://unpkg.com/@hotwired/turbo-rails",
-      "@rails/actiontext": "https://unpkg.com/@rails/actiontext@<%= npm_rails_version %>/app/assets/javascripts/actiontext.js",
-      "@rails/activestorage": "https://unpkg.com/@rails/activestorage@<%= npm_rails_version %>/app/assets/javascripts/activestorage.esm.js",
-      "flatpickr": "https://unpkg.com/flatpickr/dist/esm/index.js",
-      "stimulus-flatpickr": "https://unpkg.com/stimulus-flatpickr@3.0.0-0/dist/index.m.js",
-      "tailwindcss-stimulus-components": "https://unpkg.com/tailwindcss-stimulus-components/dist/tailwindcss-stimulus-components.module.js",
-      "tom-select": "https://unpkg.com/tom-select/dist/esm/tom-select.complete.js",
-      "trix": "https://unpkg.com/trix"
-    }
-  }
-</script>
-<script async src="https://unpkg.com/es-module-shims/dist/es-module-shims.js"></script>
-
-<script type="module">
-  import * as Turbo from "@hotwired/turbo-rails"
-
-  import * as ActiveStorage from "@rails/activestorage"
-  ActiveStorage.start()
-  import "trix"
-  import "@rails/actiontext"
-
-  import { Application, Controller } from '@hotwired/stimulus'
-  const application = Application.start()
-
-  import { Dropdown } from "tailwindcss-stimulus-components"
-  application.register("dropdown", Dropdown)
-
-  import StimulusFlatpickr from "stimulus-flatpickr"
-  application.register("flatpickr", StimulusFlatpickr)
-
-  import TomSelect from "tom-select"
-
-  (() => {
-    application.register('select', class extends Controller {
-      static values = {
-        options: Object,
-        url: String
-      }
-
-      connect() {
-        this.select = new TomSelect(this.element, {
-          plugins: ['remove_button'],
-          valueField: 'id',
-          labelField: 'name',
-          searchField: 'name',
-          load: (search, callback) => {
-            let url = search ? `${this.urlValue}?q=${search}` : this.urlValue;
-            fetch(url)
-              .then(response => response.json())
-              .then(json => {
-                callback(json);
-              }).catch(() => {
-                callback();
-              });
-          }
-        })
-      }
-
-      disconnect() {
-        this.select.destroy()
-      }
-    })
-
-    application.register('nested-form', class extends Controller {
-      static get targets() {
-        return [ "links", "template" ]
-      }
-
-      connect() {
-        this.wrapperClass = this.data.get("wrapperClass") || "nested-fields"
-      }
-
-      add_association(event) {
-        event.preventDefault()
-
-        var content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime())
-        this.linksTarget.insertAdjacentHTML('beforebegin', content)
-      }
-
-      remove_association(event) {
-        event.preventDefault()
-
-        let wrapper = event.target.closest("." + this.wrapperClass)
-
-        // New records are simply removed from the page
-        if (wrapper.dataset.newRecord == "true") {
-          wrapper.remove()
-
-        // Existing records are hidden and flagged for deletion
-        } else {
-          wrapper.querySelector("input[name*='_destroy']").value = 1
-          wrapper.style.display = 'none'
-        }
-      }
-    })
-  })()
-</script>

data/app/views/madmin/application/_navigation.html.erb

@@ -1,29 +1,24 @@
-<div class="flex flex-col h-full text-sm">
-  <div class="flex md:block justify-between items-center">
-    <div class="flex md:block items-center">
-      <h1 class="mr-2 md:p-2 text-xl font-semibold">Madmin</h1>
-      <% if main_app.respond_to?(:root_url) %>
-        <%= link_to main_app.root_url, class: "block p-2 rounded hover:bg-gray-200", data: { turbo: false } do %>
-          ← Back <span class="hidden md:inline">to App</span>
-        <% end %>
-      <% end %>
-    </div>
+<h1><%= link_to_if respond_to?(:root_url), Madmin.site_name, root_url, data: {turbo: false}  %></h1>
 
-    <div class="-mr-2 flex items-center md:hidden relative" data-controller="dropdown">
-      <button data-action="click->dropdown#toggle touch->dropdown#toggle click@window->dropdown#hide touch@window#dropdown->hide" type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-200 focus:outline-none focus:ring-2 focus-ring-inset focus:ring-white" id="main-menu" aria-haspopup="true">
-        <span class="sr-only">Open main menu</span>
-        <!-- Heroicon name: outline/menu -->
-        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
-        </svg>
-      </button>
+<nav>
+  <%= nav_link_to "Dashboard", madmin_root_path %>
 
-      <div class="absolute top-12 right-0 bg-white rounded-lg min-w-64 shadow-lg hidden md:flex flex-col flex-grow justify-between" data-dropdown-target="menu">
-        <%= render "menu_resources" %>
-      </div>
-    </div>
-    <div class="hidden md:block">
-      <%= render "menu_resources" %>
-    </div>
-  </div>
-</div>
+  <% Madmin.menu.render do |item| %>
+    <% if item.url %>
+      <%= nav_link_to item.label, item.url, starts_with: item.url %>
+    <% else %>
+      <h4><%= item.label %></h4>
+    <% end %>
+
+    <% item.items.each do |item| %>
+      <%= nav_link_to item.label, item.url, starts_with: item.url %>
+    <% end %>
+  <% end %>
+</nav>
+
+<footer>
+  <%= link_to "https://github.com/excid3/madmin", target: :_blank do %>
+    <svg viewBox="0 0 16 16" height="1rem" width="1rem" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+    Madmin on GitHub
+  <% end %>
+</footer>

data/app/views/madmin/application/edit.html.erb

@@ -1,7 +1,11 @@
-<h1 class="text-xl mb-4">
-  <%= link_to resource.friendly_name.pluralize, resource.index_path, class: "text-blue-500" %>
-  /
-  <strong>Edit <%= link_to resource.display_name(@record), resource.show_path(@record), class: "text-blue-500" %></strong>
-</h1>
+<%= content_for :title, "New #{resource.display_name(@record)}" %>
+
+<header class="header">
+  <h1>
+    <%= link_to resource.friendly_name.pluralize, resource.index_path %>
+    /
+    <strong>Edit <%= link_to resource.display_name(@record), resource.show_path(@record) %></strong>
+  </h1>
+</header>
 
 <%= render partial: "form", locals: { record: @record, resource: resource } %>

data/app/views/madmin/application/index.html.erb

@@ -1,62 +1,68 @@
-<div class="md:flex justify-between items-center space-y-4 md:space-y-0">
-  <h1 class="text-xl font-semibold"><%= resource.friendly_name.pluralize %></h1>
-
-  <div class="flex-grow flex md:justify-end gap-4">
-    <form class="flex items-center gap-2 relative">
-      <%= hidden_field_tag :page, params[:page], value: 1, class: "hidden" %>
-      <%= search_field_tag :q, params[:q], placeholder: "Search", class: "rounded-full px-4 focus:bg-white focus:border-blue-500" %>
-      <%= link_to clear_search_params, class: "absolute top-1/2 right-3 text-gray-500 bg-white transform -translate-y-1/2" do %>
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-        </svg>
-      <% end %>
+<%= content_for :title, resource.friendly_name.pluralize %>
+
+<header class="header">
+  <h1><%= resource.friendly_name.pluralize %></h1>
+
+  <div class="actions">
+    <form class="search">
+      <%= hidden_field_tag :page, params[:page], value: 1 %>
+      <%= search_field_tag :q, params[:q], placeholder: "Search" %>
     </form>
 
-    <%= link_to resource.new_path, class: "bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" do %>
-      New <span class="hidden md:inline"><%= resource.friendly_name %></span>
-    <% end %>
+    <%= link_to clear_search_params, class: "btn btn-secondary" do %>
+      <svg xmlns="http://www.w3.org/2000/svg" height="1rem" width="1rem" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+      </svg>
+      <% end if params[:q].present? %>
+
+    <%= link_to "New #{resource.friendly_name}", resource.new_path, class: "btn btn-secondary" %>
   </div>
-</div>
+</header>
 
-<div class="mb-4">
+<nav class="scopes">
   <% if resource.scopes.any? %>
-    <%= link_to "All", resource.index_path, class: class_names("p-2 rounded", {"bg-gray-100" =>  params[:scope].blank?}) %>
+    <%= link_to "All", resource.index_path, class: class_names("btn btn-secondary", {"active" => params[:scope].blank?}) %>
   <% end %>
 
   <% resource.scopes.each do |scope| %>
-    <%= link_to scope.to_s.humanize, resource.index_path(scope: scope), class: class_names("p-2 rounded", {"bg-gray-100" => params[:scope] == scope.to_s}) %>
+    <%= link_to scope.to_s.humanize, resource.index_path(scope: scope), class: class_names("btn btn-secondary", {"active" => params[:scope] == scope.to_s}) %>
   <% end %>
-</div>
-<div class="min-w-full max-w-xl overflow-x-auto pb-4">
-  <table class="min-w-full divide-y divide-gray-200">
+</nav>
+
+<div class="table-scroll">
+  <table>
     <thead>
-      <tr class="border-b border-gray-200">
+      <tr>
         <% resource.attributes.values.each do |attribute| %>
           <% next if attribute.field.nil? %>
           <% next unless attribute.field.visible?(action_name) %>
 
-          <th class="py-2 px-4 text-left text-xs text-gray-500 font-medium uppercase whitespace-nowrap"><%= sortable attribute.name, attribute.name.to_s.titleize %></th>
+          <th><%= sortable attribute.name, attribute.name.to_s.titleize %></th>
         <% end %>
-        <th class="py-2 px-4 text-left text-xs text-gray-500 font-medium uppercase">Actions</th>
+        <th></th>
       </tr>
     </thead>
 
-    <tbody class="text-sm divide-y">
+    <tbody>
       <% @records.each do |record| %>
         <tr>
           <% resource.attributes.values.each do |attribute| %>
             <% next if attribute.field.nil? %>
             <% next unless attribute.field.visible?(action_name) %>
-            <td class="px-4 py-2"><%= render partial: attribute.field.to_partial_path("index"), locals: { field: attribute.field, record: record, resource: resource } %></td>
+            <td><%= render partial: attribute.field.to_partial_path("index"), locals: { field: attribute.field, record: record, resource: resource } %></td>
           <% end %>
 
-          <td class="px-4 py-2 text-center">
-            <%= link_to "View", resource.show_path(record), class: "text-blue-500" %>
-            <%= link_to "Edit", resource.edit_path(record), class: "text-blue-500" %>
+          <td>
+            <%= link_to "View", resource.show_path(record) %>
+            <%= link_to "Edit", resource.edit_path(record) %>
           </td>
         </tr>
       <% end %>
     </tbody>
   </table>
 </div>
-<%== pagy_nav @pagy %>
+
+<div class="pagination">
+  <%== pagy_nav @pagy if @pagy.pages > 1 %>
+  <span>Showing <%= tag.strong @pagy.in %> of <%= tag.strong @pagy.count %></span>
+</div>

data/app/views/madmin/application/new.html.erb

@@ -1,7 +1,11 @@
-<h1 class="text-xl mb-4">
-  <%= link_to resource.friendly_name.pluralize, resource.index_path, class: "text-blue-500" %>
-  /
-  <strong>New <%= resource.friendly_name %></strong>
-</h1>
+<%= content_for :title, "New #{resource.friendly_name}" %>
+
+<header class="header">
+  <h1>
+    <%= link_to resource.friendly_name.pluralize, resource.index_path %>
+    /
+    <strong>New <%= resource.friendly_name %></strong>
+  </h1>
+</header>
 
 <%= render partial: "form", locals: { record: @record, resource: resource } %>