admin_suite 0.3.1 → 0.5.0

data/app/javascript/admin_suite_application.js

@@ -42,3 +42,6 @@ application.register("admin-suite--flash", FlashController)
 
 import DependentSearchableSelectController from "controllers/admin_suite/dependent_searchable_select_controller"
 application.register("admin-suite--dependent-searchable-select", DependentSearchableSelectController)
+
+import ChartController from "controllers/admin_suite/chart_controller"
+application.register("admin-suite--chart", ChartController)

data/app/javascript/controllers/admin_suite/chart_controller.js

@@ -0,0 +1,173 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Chart Controller (Admin Suite)
+ *
+ * Upgrades a server-rendered CSS bar chart into a real Chart.js canvas.
+ * Chart.js is loaded from the engine's vendored asset (see app/assets/vendor)
+ * only on pages that render a chart panel with data.
+ *
+ * The server-rendered bar markup (this.element's existing children) is the
+ * no-JS degraded state. It stays on the page and visible until Chart.js is
+ * confirmed available and a canvas has actually been drawn — if Chart.js
+ * never loads, the bars are simply never hidden.
+ */
+
+// Bounded retry: ~50 attempts at 100ms each (~5s) before giving up. Guards
+// against an unbounded poll if the Chart.js asset fails to load (e.g. blocked
+// by a CSP, 404, or a page that never actually included it).
+const MAX_INIT_ATTEMPTS = 50
+const INIT_RETRY_DELAY_MS = 100
+
+const COLOR_HEX = {
+  amber: "#f59e0b",
+  green: "#22c55e",
+  red: "#ef4444",
+  cyan: "#06b6d4",
+  violet: "#8b5cf6",
+  indigo: "#6366f1",
+  slate: "#64748b",
+}
+
+const DOUGHNUT_PALETTE = [
+  "#6366f1", "#f59e0b", "#22c55e", "#ef4444",
+  "#06b6d4", "#8b5cf6", "#64748b", "#ec4899",
+]
+
+// Mirrors the ERB partial's own `chart_types` allowlist (see
+// _chart.html.erb). The ERB already normalizes an unknown `type:` down to
+// "bar" before it reaches the DOM, so this is a defensive second check, not
+// the primary one — it only matters if something other than the shipped
+// partial writes the type-value attribute (e.g. a host's `panel_chart`
+// override that skips the ERB's own validation).
+const KNOWN_TYPES = [ "bar", "line", "area", "doughnut" ]
+
+// Fallback height (px) if the server didn't send a height value for some
+// reason. Kept in sync with the ERB partial's own default.
+const DEFAULT_HEIGHT_PX = 192
+
+export default class extends Controller {
+  static values = {
+    series: Array,
+    type: String,
+    color: String,
+    height: Number,
+  }
+
+  connect() {
+    this.initAttempts = 0
+    this.chart = null
+    this.canvasWrapper = null
+    this.initChart()
+  }
+
+  initChart() {
+    if (typeof window.Chart === "undefined") {
+      this.initAttempts += 1
+      if (this.initAttempts >= MAX_INIT_ATTEMPTS) {
+        console.warn(
+          "admin-suite--chart: Chart.js failed to load after " +
+            MAX_INIT_ATTEMPTS +
+            " attempts; leaving the server-rendered bar chart in place."
+        )
+        return
+      }
+
+      this.retryTimeout = setTimeout(() => this.initChart(), INIT_RETRY_DELAY_MS)
+      return
+    }
+
+    // Idempotence guard: never build a second chart on top of an existing one.
+    if (this.chart) return
+
+    const series = this.hasSeriesValue ? this.seriesValue : []
+    if (series.length === 0) return
+
+    let type = this.hasTypeValue && this.typeValue ? this.typeValue : "bar"
+    if (!KNOWN_TYPES.includes(type)) {
+      console.warn(
+        "admin-suite--chart: unknown chart type " + JSON.stringify(type) + "; falling back to \"bar\"."
+      )
+      type = "bar"
+    }
+    const color = COLOR_HEX[this.colorValue] || COLOR_HEX.indigo
+    const height = this.hasHeightValue && this.heightValue > 0 ? this.heightValue : DEFAULT_HEIGHT_PX
+
+    // Chart.js's `responsive: true` / `maintainAspectRatio: false` combo
+    // requires the canvas's parent to have an explicit, non-content-derived
+    // height — otherwise there is no reference box to size against, and the
+    // canvas can render at 0px or grow unboundedly. The wrapper's height
+    // matches the server-rendered bars' height exactly (same data value), so
+    // there's no layout shift when the canvas replaces them.
+    const wrapper = document.createElement("div")
+    wrapper.style.position = "relative"
+    wrapper.style.height = `${height}px`
+    wrapper.style.width = "100%"
+
+    const canvas = document.createElement("canvas")
+    canvas.setAttribute("role", "img")
+    canvas.setAttribute("aria-label", "Chart")
+    wrapper.appendChild(canvas)
+
+    // Attach to the document before constructing the Chart so Chart.js can
+    // actually measure the wrapper's box on first render.
+    this.element.appendChild(wrapper)
+
+    const labels = series.map((row) => row.label)
+    const values = series.map((row) => row.value)
+
+    const chartType = type === "area" ? "line" : type
+    const isDoughnut = chartType === "doughnut"
+
+    const dataset = {
+      data: values,
+      backgroundColor: isDoughnut ? DOUGHNUT_PALETTE : color,
+      borderColor: isDoughnut ? DOUGHNUT_PALETTE : color,
+      fill: type === "area",
+      tension: 0.3,
+    }
+
+    // Only hide the degraded bar markup once Chart.js has actually accepted
+    // the config and rendered — this is what keeps the CSS bars visible as
+    // the degraded state on any earlier failure path.
+    this.chart = new window.Chart(canvas.getContext("2d"), {
+      type: chartType,
+      data: { labels, datasets: [ dataset ] },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: { legend: { display: isDoughnut } },
+        scales: isDoughnut ? {} : { y: { beginAtZero: true } },
+      },
+    })
+
+    this.canvasWrapper = wrapper
+
+    // Hide (not remove) the server-rendered bar markup so it can be restored
+    // by simply removing the canvas wrapper if the controller disconnects.
+    Array.from(this.element.children).forEach((child) => {
+      if (child !== wrapper) child.style.display = "none"
+    })
+  }
+
+  disconnect() {
+    if (this.retryTimeout) {
+      clearTimeout(this.retryTimeout)
+      this.retryTimeout = null
+    }
+
+    if (this.chart) {
+      this.chart.destroy()
+      this.chart = null
+    }
+
+    if (this.canvasWrapper) {
+      this.canvasWrapper.remove()
+      this.canvasWrapper = null
+    }
+
+    Array.from(this.element.children).forEach((child) => {
+      child.style.display = ""
+    })
+  }
+}

data/app/javascript/controllers/admin_suite/markdown_editor_controller.js

@@ -4,18 +4,37 @@ import { Controller } from "@hotwired/stimulus"
  * Markdown Editor Controller (Admin Suite)
  *
  * Initializes EasyMDE on a textarea element for rich markdown editing.
- * EasyMDE is loaded globally via script tag in the admin layout.
+ * EasyMDE is loaded from the engine's vendored asset (see app/assets/vendor)
+ * only on pages that render a markdown field.
  */
+
+// Bounded retry: ~50 attempts at 100ms each (~5s) before giving up. Guards
+// against an unbounded poll if the EasyMDE asset fails to load (e.g. blocked
+// by a CSP, 404, or a page that never actually included it).
+const MAX_INIT_ATTEMPTS = 50
+const INIT_RETRY_DELAY_MS = 100
+
 export default class extends Controller {
   static targets = ["textarea"]
 
   connect() {
+    this.initAttempts = 0
     this.initEditor()
   }
 
   initEditor() {
     if (typeof window.EasyMDE === "undefined") {
-      setTimeout(() => this.initEditor(), 100)
+      this.initAttempts += 1
+      if (this.initAttempts >= MAX_INIT_ATTEMPTS) {
+        console.warn(
+          "admin-suite--markdown-editor: EasyMDE failed to load after " +
+            MAX_INIT_ATTEMPTS +
+            " attempts; falling back to a plain textarea."
+        )
+        return
+      }
+
+      setTimeout(() => this.initEditor(), INIT_RETRY_DELAY_MS)
       return
     }
 

data/app/views/admin_suite/panels/_chart.html.erb

@@ -1,7 +1,102 @@
-<% data = Array(panel_eval(panel.options[:data])) %>
+<%
+  raw_data =
+    begin
+      Array(panel_eval(panel.options[:data]))
+    rescue StandardError => e
+      Rails.logger&.warn(
+        "AdminSuite: chart panel #{panel.title.inspect} data raised #{e.class}: #{e.message}\n" \
+        "#{e.backtrace&.first(5)&.join("\n")}"
+      )
+      []
+    end
+  # Accept String-keyed rows (JSONB, API payloads) the same way data_table does
+  # (see lib/admin_suite/renderer.rb#data_table), and skip any row that isn't
+  # Hash-like: a data proc can *succeed* and still hand back a junk row (e.g.
+  # a bare Integer or nil mixed into the array), and indexing that with
+  # `row[:value]` raises rather than returning nil, so it must be filtered
+  # before it reaches the height math below.
+  data = raw_data.filter_map do |row|
+    row = row.symbolize_keys if row.respond_to?(:symbolize_keys)
+    next unless row.is_a?(Hash)
+
+    raw_value = row[:value]
+    # Total coercion: `Float()` (unlike `#to_f`) raises on Boolean/Hash/Array/
+    # nil/non-numeric-String values instead of silently returning 0 or
+    # blowing up later, so a junk value degrades to 0 here rather than
+    # 500ing the dashboard when the height math below reaches it.
+    numeric = begin
+      Float(raw_value)
+    rescue ArgumentError, TypeError
+      0.0
+    end
+
+    # `value` stays as originally provided (e.g. an Integer or a numeric
+    # String) so titles/labels still read "Mon: 3" rather than "Mon: 3.0" —
+    # `numeric` is the only thing the height math and the JSON series handed
+    # to Chart.js should ever touch.
+    { label: row[:label], value: raw_value, numeric: numeric }
+  end
+%>
 <% total = panel.options[:total] %>
-<% color = (panel.options[:color] || theme_primary).to_sym %>
-<% max_value = (data.map { |d| d[:value].to_f }.max || 1).to_f %>
+<%
+  # Total coercion, same idiom as `type:` below: `.to_sym` alone raises for
+  # any `color:` value that doesn't implement it (an Integer, Boolean, ...) --
+  # `NoMethodError` 500ing the whole dashboard. `.to_s` first makes it total;
+  # an unrecognized result (e.g. `color: 42` -> `:"42"`) already falls through
+  # to indigo in both the `case` below and the JS `COLOR_HEX` map, so no new
+  # fallback logic is needed here.
+  color = (panel.options[:color] || theme_primary).to_s.presence&.to_sym
+%>
+<%
+  # `type:` is validated here, not just passed through, because it flows to
+  # both the Chart.js config (an unrecognized string throws inside Chart.js)
+  # and the degraded ERB branch below — a host typo (e.g. `type: :pie`, which
+  # Chart.js itself doesn't even ship) must degrade to the bar chart, not
+  # break the dashboard or silently render nothing.
+  chart_types = %i[bar line area doughnut]
+  # `.to_s` first: `presence&.to_sym` alone raises on any non-String/Symbol
+  # scalar (an Integer, Float, or `true`/`false` don't define `#to_sym`),
+  # which is exactly the host-typo shape this fallback exists to catch.
+  # `.to_s` makes the coercion total -- `42 → "42" → :"42"` (fails the
+  # allowlist below, warns, falls back to :bar) and `nil → "" → nil` via
+  # `presence` (falls back to :bar silently, since an unspecified type is
+  # not a typo).
+  chart_type = panel.options[:type].to_s.presence&.to_sym
+  if chart_type && !chart_types.include?(chart_type)
+    Rails.logger&.warn(
+      "AdminSuite: chart panel #{panel.title.inspect} has unknown type #{chart_type.inspect}; " \
+      "falling back to :bar. Supported: #{chart_types.join(', ')}."
+    )
+    chart_type = nil
+  end
+  chart_type ||= :bar
+%>
+<%
+  # Chart height: 64px (the old `h-16` bar height) was fine for sparkline-ish
+  # CSS bars, but is not usable for a real Chart.js chart with axes/legend.
+  # Emitted as an inline style below, not an interpolated Tailwind height
+  # class (which the content scanner can't see at build time, since it's
+  # never a literal class name in source — see panels_helper.rb's span
+  # comment for the same lesson), so both the degraded bars and the upgraded
+  # canvas share an identical, explicit height and there's no layout shift
+  # when Chart.js takes over.
+  # Total coercion, same idiom as `data:`'s per-row `value` above: `presence`
+  # filters `nil`/`""`/`false`/`{}`/`[]`, but `true`, Symbols, non-empty
+  # Arrays and non-empty Hashes all survive it and none respond to `#to_i` --
+  # `NoMethodError` 500ing the whole dashboard. `Integer(Float(...))` raises
+  # on exactly those (plus non-numeric Strings), so anything that can't
+  # genuinely parse degrades to the default instead. `RangeError` covers its
+  # `FloatDomainError` subclass: `Float::INFINITY` and `NAN` parse fine but
+  # have no Integer form, and a host can reach them by computing a height
+  # from a ratio that divides by zero.
+  chart_height = begin
+    Integer(Float(panel.options[:height]))
+  rescue ArgumentError, TypeError, RangeError
+    192
+  end
+  chart_height = 192 if chart_height <= 0
+%>
+<% max_value = (data.map { |d| d[:numeric] }.max || 1).to_f %>
 <% max_value = 1.0 if max_value.zero? %>
 
 <% bar_color = case color
@@ -23,23 +118,68 @@ end %>
   </div>
 
   <% if data.any? %>
-    <div class="flex items-end gap-1 h-16">
-      <% data.each do |d| %>
-        <% value = d[:value].to_f %>
-        <% height_float = (value / max_value) * 100.0 %>
-        <% height_float = 0.0 if height_float.nan? || height_float.infinite? %>
-        <% height = height_float.round %>
-        <% height = [height, 2].max if value.positive? %>
-        <div class="flex-1 h-full flex flex-col items-center justify-end">
-          <div class="w-full rounded-t <%= bar_color %> transition-all" style="height: <%= height %>%"
-               title="<%= "#{d[:label]}: #{d[:value]}" %>"></div>
-        </div>
+    <%
+      # Load the vendored Chart.js assets only on pages that actually render a
+      # chart with data, via a dedicated content_for hook consumed by the
+      # layout (see app/views/layouts/admin_suite/application.html.erb).
+      # Mirrors the EasyMDE hook in
+      # lib/admin_suite/ui/field_renderer_registry.rb's :markdown handler.
+      # Guarded so multiple chart panels on one page don't emit the tags twice.
+    %>
+    <% unless content_for?(:chart_assets) %>
+      <% content_for(:chart_assets) do %>
+        <%# "vendor/chart.umd.min" (not bare "chart.umd.min"): Propshaft resolves
+            assets by path relative to a load-path root, and app/assets/vendor
+            lives *under* the already-registered app/assets root, so its files
+            are found at "vendor/chart.umd.min.js". %>
+        <%= javascript_include_tag "vendor/chart.umd.min", "data-turbo-track": "reload" %>
       <% end %>
-    </div>
+    <% end %>
 
-    <div class="flex gap-1 mt-2">
-      <% data.each do |d| %>
-        <div class="flex-1 text-center text-xs text-slate-400" title="<%= d[:label] %>"><%= d[:label] %></div>
+    <%
+      # Chart.js gets the coerced numeric series, never the raw display
+      # value — a Boolean/Hash/Array/nil `value` would otherwise reach
+      # Chart.js as-is and break the chart, even though it's already been
+      # safely zeroed out for the CSS bars above.
+      series_for_chart_js = data.map { |d| { label: d[:label], value: d[:numeric] } }
+    %>
+    <div data-controller="admin-suite--chart"
+         data-admin-suite--chart-series-value="<%= series_for_chart_js.to_json %>"
+         data-admin-suite--chart-type-value="<%= chart_type %>"
+         data-admin-suite--chart-color-value="<%= color %>"
+         data-admin-suite--chart-height-value="<%= chart_height %>">
+      <% if chart_type == :doughnut %>
+        <%# A stacked bar makes no sense as a doughnut's degraded (no-JS)
+            state -- there's no "height" a doughnut slice maps to. A plain
+            labelled value list carries the same data legibly instead. %>
+        <div class="divide-y divide-slate-100" data-admin-suite--chart-target="list">
+          <% data.each do |d| %>
+            <div class="flex items-center justify-between py-1.5 text-sm">
+              <span class="text-slate-600 truncate" title="<%= d[:label] %>"><%= d[:label] %></span>
+              <span class="font-medium text-slate-900"><%= d[:value] %></span>
+            </div>
+          <% end %>
+        </div>
+      <% else %>
+        <div class="flex items-end gap-1" data-admin-suite--chart-target="bars" style="height: <%= chart_height %>px;">
+          <% data.each do |d| %>
+            <% value = d[:numeric] %>
+            <% height_float = (value / max_value) * 100.0 %>
+            <% height_float = 0.0 if height_float.nan? || height_float.infinite? %>
+            <% height = height_float.round %>
+            <% height = [height, 2].max if value.positive? %>
+            <div class="flex-1 h-full flex flex-col items-center justify-end">
+              <div class="w-full rounded-t <%= bar_color %> transition-all" style="height: <%= height %>%"
+                   title="<%= "#{d[:label]}: #{d[:value]}" %>"></div>
+            </div>
+          <% end %>
+        </div>
+
+        <div class="flex gap-1 mt-2" data-admin-suite--chart-target="labels">
+          <% data.each do |d| %>
+            <div class="flex-1 text-center text-xs text-slate-400" title="<%= d[:label] %>"><%= d[:label] %></div>
+          <% end %>
+        </div>
       <% end %>
     </div>
   <% else %>

data/app/views/admin_suite/panels/_stat.html.erb

@@ -31,6 +31,16 @@
       border: "border border-violet-200",
       text: "text-violet-700",
       label: "text-violet-600" }
+  when :slate
+    { bg: "bg-white",
+      border: "border border-slate-200",
+      text: "text-slate-600",
+      label: "text-slate-500" }
+  when :indigo
+    { bg: "bg-gradient-to-br from-indigo-50 to-indigo-100",
+      border: "border border-indigo-200",
+      text: "text-indigo-700",
+      label: "text-indigo-600" }
   else
     { bg: "bg-white",
       border: "border border-slate-200",

data/app/views/admin_suite/resources/index.html.erb

@@ -48,11 +48,12 @@
     <% if @stats.present? %>
       <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
         <% @stats.each do |stat| %>
-          <% color = stat[:color] || :slate %>
-          <div class="bg-white rounded-xl p-4 border border-slate-200">
-            <div class="text-2xl font-bold text-<%= color %>-600"><%= stat[:value] %></div>
-            <div class="text-sm text-slate-500"><%= stat[:name] %></div>
-          </div>
+          <% stat_panel = AdminSuite::UI::PanelDefinition.new(
+               type: :stat,
+               title: stat[:name],
+               options: { value: stat[:value], color: stat[:color] || :slate, variant: :mini }
+             ) %>
+          <%= render "admin_suite/panels/stat", panel: stat_panel %>
         <% end %>
       </div>
     <% end %>
@@ -124,6 +125,14 @@
               </div>
             <% end %>
 
+            <div>
+              <label class="block text-sm font-medium text-slate-700 mb-1">Per page</label>
+              <%= select_tag :per_page,
+                  options_for_select([ 25, 50, 100 ], @pagy&.limit),
+                  class: "form-input w-full",
+                  data: { "admin-suite--live-filter-target": "input", action: "change->admin-suite--live-filter#submit" } %>
+            </div>
+
             <div class="flex gap-2 pt-2">
               <button type="submit" class="admin-suite-btn-primary flex-1 text-sm font-medium rounded-lg transition-colors">
                 Apply
@@ -142,9 +151,9 @@
       <%= turbo_frame_tag "resource_results", data: { turbo_action: "advance" } do %>
         <div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
           <% if @collection.any? %>
-          <div class="overflow-x-auto">
+          <div class="overflow-x-auto overflow-y-auto max-h-[70vh]">
             <table class="min-w-full divide-y divide-slate-200">
-              <thead class="bg-slate-50">
+              <thead class="bg-slate-50 sticky top-0 z-10">
                 <tr>
                   <%
                     current_sort = params[:sort]&.to_sym || resource_config.index_config.default_sort
@@ -188,9 +197,20 @@
               </thead>
               <tbody class="divide-y divide-slate-200">
                 <% @collection.each do |record| %>
-                  <tr class="hover:bg-slate-50">
+                  <%
+                    show_path = url_for(action: :show, id: record.to_param)
+                  %>
+                  <%= tag.tr class: "hover:bg-slate-50 cursor-pointer",
+                      data: {
+                        controller: "admin-suite--click-actions",
+                        action: "click->admin-suite--click-actions#navigate",
+                        "admin-suite--click-actions-url-value": show_path
+                      } do %>
                     <% resource_config.index_config.columns_list.each do |column| %>
-                      <td class="px-4 py-3 text-sm text-slate-900">
+                      <%
+                        td_class = [ "px-4 py-3 text-sm text-slate-900", column_align_class(column.align), column.css_class ].reject(&:blank?).join(" ")
+                      %>
+                      <td class="<%= td_class %>">
                         <%= render_column_value(record, column) %>
                       </td>
                     <% end %>
@@ -210,85 +230,14 @@
                         <% end %>
                       </div>
                     </td>
-                  </tr>
+                  <% end %>
                 <% end %>
               </tbody>
             </table>
           </div>
 
           <!-- Pagination -->
-          <% if @pagy.pages > 1 %>
-            <div class="px-6 py-4 border-t border-slate-200">
-              <div class="flex items-center justify-between">
-                <div class="text-sm text-slate-500">
-                  Showing <span class="font-medium text-slate-700"><%= @pagy.from %></span> to
-                  <span class="font-medium text-slate-700"><%= @pagy.to %></span> of
-                  <span class="font-medium text-slate-700"><%= number_with_delimiter(@pagy.count) %></span> results
-                </div>
-
-                <nav class="flex items-center gap-1">
-                  <% if @pagy.prev %>
-                    <%= link_to url_for(params.permit!.merge(page: @pagy.prev)),
-                        class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" do %>
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
-                      </svg>
-                      Prev
-                    <% end %>
-                  <% else %>
-                    <span class="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-400 bg-slate-100 border border-slate-200 rounded-lg cursor-not-allowed">
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
-                      </svg>
-                      Prev
-                    </span>
-                  <% end %>
-
-                  <div class="hidden sm:flex items-center gap-1 mx-2">
-                    <% @pagy.series.each do |item| %>
-                      <% if item == :gap %>
-                        <span class="px-2 py-1 text-sm text-slate-400">…</span>
-                      <% elsif item.is_a?(Integer) %>
-                        <%= link_to item, url_for(params.permit!.merge(page: item)),
-                            class: "px-3 py-1.5 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" %>
-                      <% elsif item.is_a?(String) %>
-                        <span class="px-3 py-1.5 text-sm font-medium text-white rounded-lg" style="background: var(--admin-suite-primary); border: 1px solid var(--admin-suite-primary);">
-                          <%= item %>
-                        </span>
-                      <% end %>
-                    <% end %>
-                  </div>
-
-                  <span class="sm:hidden px-3 py-1.5 text-sm text-slate-500">
-                    Page <%= @pagy.page %> of <%= @pagy.pages %>
-                  </span>
-
-                  <% if @pagy.next %>
-                    <%= link_to url_for(params.permit!.merge(page: @pagy.next)),
-                        class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" do %>
-                      Next
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
-                      </svg>
-                    <% end %>
-                  <% else %>
-                    <span class="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-400 bg-slate-100 border border-slate-200 rounded-lg cursor-not-allowed">
-                      Next
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
-                      </svg>
-                    </span>
-                  <% end %>
-                </nav>
-              </div>
-            </div>
-          <% else %>
-            <div class="px-6 py-3 border-t border-slate-200">
-              <div class="text-sm text-slate-500">
-                Showing <span class="font-medium text-slate-700"><%= @pagy.count %></span> results
-              </div>
-            </div>
-          <% end %>
+          <%= render "admin_suite/shared/pagination", pagy: @pagy, page_param: :page %>
         <% else %>
           <div class="p-12 text-center">
             <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-100 mb-4">

data/app/views/admin_suite/shared/_pagination.html.erb

@@ -0,0 +1,74 @@
+<% page_param = local_assigns.fetch(:page_param, :page) %>
+
+<% if pagy.pages > 1 %>
+  <div class="px-6 py-4 border-t border-slate-200">
+    <div class="flex items-center justify-between">
+      <div class="text-sm text-slate-500">
+        Showing <span class="font-medium text-slate-700"><%= pagy.from %></span> to
+        <span class="font-medium text-slate-700"><%= pagy.to %></span> of
+        <span class="font-medium text-slate-700"><%= number_with_delimiter(pagy.count) %></span> results
+      </div>
+
+      <nav class="flex items-center gap-1">
+        <% if pagy.prev %>
+          <%= link_to url_for(params.permit!.merge(page_param => pagy.prev)),
+              class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" do %>
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+            </svg>
+            Prev
+          <% end %>
+        <% else %>
+          <span class="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-400 bg-slate-100 border border-slate-200 rounded-lg cursor-not-allowed">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+            </svg>
+            Prev
+          </span>
+        <% end %>
+
+        <div class="hidden sm:flex items-center gap-1 mx-2">
+          <% pagy.series.each do |item| %>
+            <% if item == :gap %>
+              <span class="px-2 py-1 text-sm text-slate-400">…</span>
+            <% elsif item.is_a?(Integer) %>
+              <%= link_to item, url_for(params.permit!.merge(page_param => item)),
+                  class: "px-3 py-1.5 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" %>
+            <% elsif item.is_a?(String) %>
+              <span class="px-3 py-1.5 text-sm font-medium text-white rounded-lg" style="background: var(--admin-suite-primary); border: 1px solid var(--admin-suite-primary);">
+                <%= item %>
+              </span>
+            <% end %>
+          <% end %>
+        </div>
+
+        <span class="sm:hidden px-3 py-1.5 text-sm text-slate-500">
+          Page <%= pagy.page %> of <%= pagy.pages %>
+        </span>
+
+        <% if pagy.next %>
+          <%= link_to url_for(params.permit!.merge(page_param => pagy.next)),
+              class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" do %>
+            Next
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+            </svg>
+          <% end %>
+        <% else %>
+          <span class="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-400 bg-slate-100 border border-slate-200 rounded-lg cursor-not-allowed">
+            Next
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+            </svg>
+          </span>
+        <% end %>
+      </nav>
+    </div>
+  </div>
+<% else %>
+  <div class="px-6 py-3 border-t border-slate-200">
+    <div class="text-sm text-slate-500">
+      Showing <span class="font-medium text-slate-700"><%= pagy.count %></span> results
+    </div>
+  </div>
+<% end %>