ruby_cms 0.2.1.0 → 1.0.0

data/lib/generators/ruby_cms/templates/views/admin/shared/_data_table.html.erb

@@ -0,0 +1,255 @@
+<%#
+  Canonical admin DataTable layout.
+  Renders: search input (icon + ⌘K), filter pills, columns toggle, blue bulk action bar,
+  table with sortable headers, rows via row_partial, context menu, pagination.
+
+  Locals (all optional unless marked required):
+    id                  String — turbo frame id (default "admin_table_content")
+    search_url          String — submit url for the search form (required for search)
+    search_param        Symbol — query param name (default :q)
+    search_placeholder  String
+    filter_pills        Array of { key, label, count, url } (url optional — derived from search_url + filter_param)
+    filter_param        Symbol — query param name (default :filter)
+    current_filter      String — currently active filter key
+    columns_toggle      Array of { key, label } — toggleable columns (data-column on th/td must match)
+    headers             Array of { key, label, sortable:, width:, align: } (required)
+    sort_url            String — base path for sort links (default = search_url)
+    current_sort        String
+    current_direction   String ("asc"|"desc")
+    bulk_actions        Array of { label, url, method, icon, variant } (variant: :default | :danger)
+    bulk_delete_url     String — convenience, renders red delete button
+    collection          Enumerable (required)
+    row_partial         String — partial path (each item rendered with locals[item.model_name.element])
+    row_click_url       Proc — item → url for clickable row navigation
+    empty_state         Hash for EmptyState component
+    pagination          Hash (current_page, per_page, total_count)
+    pagination_path     String or Symbol or Proc
+    preserved_query     Hash — extra query params to append to pagination/sort/filter links
+    toolbar_extra       String — raw HTML rendered between filter pills and columns toggle
+%>
+<%
+  id                  = local_assigns[:id] || "admin_table_content"
+  search_url          = local_assigns[:search_url]
+  search_param        = (local_assigns[:search_param] || :q).to_sym
+  search_placeholder  = local_assigns[:search_placeholder] || t("admin.pages.common.search", default: "Zoeken…")
+  filter_pills        = local_assigns[:filter_pills] || []
+  filter_param        = (local_assigns[:filter_param] || :filter).to_sym
+  current_filter      = local_assigns[:current_filter]
+  columns_toggle      = local_assigns[:columns_toggle] || []
+  headers             = local_assigns[:headers] || []
+  sort_url            = local_assigns[:sort_url] || search_url
+  current_sort        = local_assigns[:current_sort]
+  current_direction   = local_assigns[:current_direction] || "desc"
+  bulk_actions        = local_assigns[:bulk_actions] || []
+  bulk_delete_url     = local_assigns[:bulk_delete_url]
+  collection          = local_assigns[:collection] || []
+  row_partial         = local_assigns[:row_partial]
+  row_click_url       = local_assigns[:row_click_url]
+  empty_state         = local_assigns[:empty_state]
+  pagination          = local_assigns[:pagination]
+  pagination_path     = local_assigns[:pagination_path]
+  preserved_query     = local_assigns[:preserved_query] || {}
+  toolbar_extra       = local_assigns[:toolbar_extra]
+  selectable          = bulk_delete_url.present? || bulk_actions.any?
+  form_id             = "#{id}_bulk_form"
+  sort_head_th_class  = "sticky top-0 bg-white border-b border-[#e9e4d4] py-2 px-3 h-auto text-left text-[11.5px] font-semibold uppercase tracking-[0.06em] text-[#78716c] whitespace-nowrap"
+%>
+<%= DataTable(id: id, class: "w-full flex flex-col flex-1 min-w-0") do %>
+  <% if search_url.present? || filter_pills.any? || columns_toggle.any? %>
+    <div class="flex items-center gap-2 sm:gap-3 px-3 sm:px-4 py-2.5 border-b border-[#e9e4d4] flex-wrap">
+      <% if search_url.present? %>
+        <form action="<%= search_url %>" method="get"
+              data-turbo-frame="<%= id %>"
+              data-controller="ruby-ui--data-table-search admin--search-shortcut"
+              data-ruby-ui--data-table-search-delay-value="300"
+              data-action="input->ruby-ui--data-table-search#submit"
+              class="relative flex-1 basis-full sm:basis-auto min-w-0 sm:min-w-[240px] max-w-md">
+          <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[#a8a29e] pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z" />
+          </svg>
+          <input type="search" name="<%= search_param %>" value="<%= params[search_param] %>" autocomplete="off"
+                 placeholder="<%= search_placeholder %>"
+                 class="w-full h-8 pl-8 pr-14 rounded-md border border-[#e9e4d4] bg-white text-[13px] text-[#1c1917] placeholder:text-[#a8a29e] focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100">
+          <%= render RubyUI::ShortcutKey.new(class: "absolute right-2 top-1/2 -translate-y-1/2 h-5 px-1.5 rounded border border-[#e9e4d4] bg-[#faf8f3] text-[10.5px] font-mono font-medium text-[#78716c] inline-flex items-center") { "⌘K" } %>
+          <% if current_filter.present? %><input type="hidden" name="<%= filter_param %>" value="<%= current_filter %>"><% end %>
+          <% preserved_query.each do |k, v| %>
+            <% next if v.blank? || k.to_sym == search_param || k.to_sym == filter_param %>
+            <input type="hidden" name="<%= k %>" value="<%= v %>">
+          <% end %>
+        </form>
+      <% end %>
+
+      <% if filter_pills.any? %>
+        <div class="flex items-center gap-1.5 flex-wrap">
+          <% filter_pills.each do |pill| %>
+            <% active = current_filter.to_s == pill[:key].to_s %>
+            <% pill_url = pill[:url] || (search_url.present? ? "#{search_url}?#{ preserved_query.merge(filter_param => pill[:key], search_param => params[search_param]).compact.to_query }" : "#") %>
+            <%= link_to pill_url,
+                data: { turbo_frame: id },
+                class: [
+                  "inline-flex items-center gap-1.5 h-7 px-2.5 rounded-full text-[12.5px] font-medium border transition-colors no-underline",
+                  active ? "bg-blue-50 border-blue-100 text-blue-700" : "bg-transparent border-[#e9e4d4] text-[#57534e] hover:bg-[#f5f3ec]"
+                ].join(" ") do %>
+              <span><%= pill[:label] %></span>
+              <% if pill[:count] %><span class="font-mono text-[10.5px] <%= active ? "text-blue-600" : "text-[#a8a29e]" %>"><%= pill[:count] %></span><% end %>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+
+      <% if toolbar_extra.present? %>
+        <%# Callers pass `capture do ... end` (SafeBuffer) or pre-rendered component output. %>
+        <div class="flex items-center gap-1.5 flex-wrap"><%= toolbar_extra %></div>
+      <% end %>
+
+      <% if columns_toggle.any? %>
+        <div class="ml-auto">
+          <%= DataTableColumnToggle(columns: columns_toggle) %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+
+  <% if selectable %>
+    <div class="hidden flex-nowrap items-center gap-3 px-4 py-2 bg-blue-50 border-b border-blue-100" data-ruby-ui--data-table-target="bulkActions">
+      <div class="flex items-center gap-2 text-blue-800 flex-shrink-0">
+        <span class="inline-grid place-items-center w-4 h-4 rounded-sm bg-blue-600 text-white">
+          <svg class="w-2.5 h-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 12h14" /></svg>
+        </span>
+        <span data-ruby-ui--data-table-target="selectionSummary" class="text-[13px] font-medium tabular-nums whitespace-nowrap">0 of 0 selected</span>
+      </div>
+      <div class="ml-auto flex items-center gap-1.5 flex-shrink-0 flex-nowrap">
+        <% bulk_actions.each do |btn| %>
+          <% danger = btn[:variant] == :danger %>
+          <button type="button"
+                  data-action="click->ruby-ui--data-table#bulkSubmit"
+                  data-url="<%= btn[:url] %>"
+                  data-method="<%= btn[:method] || "post" %>"
+                  <% if btn[:confirm] %> data-confirm="<%= btn[:confirm] %>"<% end %>
+                  class="<%= danger ? "inline-flex items-center gap-1.5 h-7 px-2.5 rounded-md text-[12.5px] font-medium text-red-600 hover:bg-red-50 transition-colors whitespace-nowrap" : "inline-flex items-center gap-1.5 h-7 px-2.5 rounded-md bg-white border border-blue-100 text-[12.5px] font-medium text-[#1c1917] hover:bg-blue-50/60 transition-colors whitespace-nowrap" %>">
+            <% if btn[:icon] %>
+              <svg class="w-3.5 h-3.5 <%= danger ? "" : "text-[#57534e]" %>" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="<%= btn[:icon] %>" /></svg>
+            <% end %>
+            <%= btn[:label] %>
+          </button>
+        <% end %>
+        <% if bulk_delete_url.present? %>
+          <button type="button"
+                  data-action="click->ruby-ui--data-table#bulkSubmit"
+                  data-url="<%= bulk_delete_url %>"
+                  data-method="delete"
+                  class="inline-flex items-center gap-1.5 h-7 px-2.5 rounded-md text-[12.5px] font-medium text-red-600 hover:bg-red-50 transition-colors whitespace-nowrap">
+            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
+            <%= t("admin.bulk_action_table.delete_selected") %>
+          </button>
+        <% end %>
+        <button type="button" class="inline-flex items-center gap-1 h-7 px-2 rounded-md text-[12.5px] font-medium text-[#57534e] hover:bg-white/70 transition-colors whitespace-nowrap" data-action="click->ruby-ui--data-table#clearSelection">
+          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+          <%= t("admin.pages.common.clear", default: "Wissen") %>
+        </button>
+      </div>
+    </div>
+  <% end %>
+
+  <% if collection.any? %>
+    <%= DataTableForm(id: form_id, action: "") do %>
+      <div class="overflow-x-auto">
+        <table class="w-full border-collapse text-[13px]">
+          <thead>
+            <tr>
+              <% if selectable %>
+                <th class="w-9 sticky top-0 bg-white border-b border-[#e9e4d4] py-2 pl-4 pr-0 text-left">
+                  <%= DataTableSelectAllCheckbox() %>
+                </th>
+              <% end %>
+              <% headers.each do |h| %>
+                <% width_class = h[:width] ? "w-[#{h[:width]}]" : "" %>
+                <% align_class = (h[:align] == :right) ? "text-right" : "text-left" %>
+                <% th_class = "#{sort_head_th_class} #{width_class} #{align_class}" %>
+                <% if h[:sortable] && sort_url.present? %>
+                  <%= DataTableSortHead(
+                    column_key: h[:key].to_s,
+                    label: h[:label].to_s,
+                    sort: current_sort,
+                    direction: current_direction,
+                    path: sort_url,
+                    query: preserved_query,
+                    data: { column: h[:key] },
+                    class: th_class
+                  ) %>
+                <% else %>
+                  <th data-column="<%= h[:key] %>" class="<%= th_class %>">
+                    <% if h[:actions] %><span class="sr-only"><%= h[:label] || t("admin.pages.common.actions") %></span><% else %><%= h[:label] %><% end %>
+                  </th>
+                <% end %>
+              <% end %>
+            </tr>
+          </thead>
+          <tbody>
+            <% collection.each do |item| %>
+              <% next if item.nil? %>
+              <% click_url = row_click_url.respond_to?(:call) ? row_click_url.call(item) : nil %>
+              <% row_data = {} %>
+              <% controllers = [] %>
+              <% actions = [] %>
+              <% if click_url %>
+                <% controllers << "admin--clickable-row" %>
+                <% row_data[:"admin--clickable-row-click-url-value"] = click_url %>
+                <% actions << "click->admin--clickable-row#navigate" %>
+              <% end %>
+              <% controllers << "ruby-ui--context-menu" %>
+              <% actions << "contextmenu->ruby-ui--context-menu#handleContextMenu" %>
+              <% row_data[:controller] = controllers.join(" ") %>
+              <% row_data[:action] = actions.join(" ") %>
+              <% row_data[:"ruby-ui--context-menu-target"] = "trigger" %>
+              <% row_data[:"ruby-ui--context-menu-options-value"] = '{"trigger":"manual"}' %>
+              <%= content_tag :tr, class: "group transition-colors hover:bg-[#faf8f3] #{click_url ? 'cursor-pointer' : ''} border-b border-[#e9e4d4] last:border-b-0", data: row_data do %>
+                <% if selectable %>
+                  <td class="w-9 py-1.5 pl-4 pr-0 align-middle">
+                    <%= DataTableRowCheckbox(value: item.respond_to?(:id) ? item.id : nil) %>
+                  </td>
+                <% end %>
+                <% if row_partial %>
+                  <% row_locals = item.respond_to?(:model_name) ? { item.model_name.element.to_sym => item } : { item: item } %>
+                  <%= render partial: row_partial, locals: row_locals.merge(item: item) %>
+                <% end %>
+              <% end %>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    <% end %>
+    <% if pagination.present? %>
+      <div class="flex items-center justify-between gap-4 px-4 py-2.5 border-t border-[#e9e4d4] text-[12.5px] text-[#78716c] flex-wrap">
+        <span data-ruby-ui--data-table-target="selectionSummary" class="font-mono tabular-nums"><%= collection.size %> rijen</span>
+        <%
+          pagination_path_value =
+            if pagination_path.respond_to?(:call)
+              request.path
+            elsif pagination_path.is_a?(Symbol)
+              public_send(pagination_path)
+            else
+              pagination_path || request.path
+            end
+        %>
+        <%= DataTablePagination(
+          page: pagination[:current_page],
+          per_page: pagination[:per_page],
+          total_count: pagination[:total_count],
+          path: pagination_path_value,
+          query: preserved_query.merge(current_sort ? { sort: current_sort, direction: current_direction } : {})
+        ) %>
+      </div>
+    <% end %>
+  <% else %>
+    <% if empty_state.present? %>
+      <div class="p-6">
+        <%= EmptyState(**empty_state.slice(:title, :description, :primary_label, :primary_href, :icon)) %>
+      </div>
+    <% else %>
+      <div class="p-6 text-center text-[#78716c] text-[13px]">
+        <%= t("admin.pages.common.no_results", default: "Geen resultaten") %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/lib/generators/ruby_cms/templates/views/admin/shared/_turbo_pagination.html.erb

@@ -0,0 +1,53 @@
+
+<% return unless pagination && pagination[:total_pages] > 1 %>
+
+<%
+  turbo_frame ||= nil
+  active_color ||= "red"
+  prev_text ||= "← Vorige"
+  next_text ||= "Volgende →"
+
+  link_options = {}
+  link_options[:data] = { turbo_frame: turbo_frame } if turbo_frame.present?
+%>
+
+<div class="mt-4 flex items-center justify-center space-x-2">
+  <% if pagination[:has_previous] %>
+    <%= link_to path_helper.call(pagination[:previous_page]),
+        link_options.merge(class: "px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors") do %>
+      <%= prev_text %>
+    <% end %>
+  <% else %>
+    <span class="px-3 py-2 text-sm font-medium text-gray-400 bg-gray-50 border border-gray-200 rounded-lg cursor-not-allowed"><%= prev_text %></span>
+  <% end %>
+
+  <%
+    active_classes = case active_color
+    when "red" then "bg-red-600 border-red-600"
+    when "blue" then "bg-blue-600 border-blue-600"
+    when "green" then "bg-green-600 border-green-600"
+    when "purple" then "bg-purple-600 border-purple-600"
+    when "indigo" then "bg-indigo-600 border-indigo-600"
+    else "bg-red-600 border-red-600"
+    end
+  %>
+  <% (1..pagination[:total_pages]).each do |page| %>
+    <% if page == pagination[:current_page] %>
+      <span class="px-3 py-2 text-sm font-medium text-white <%= active_classes %> rounded-lg"><%= page %></span>
+    <% elsif page == 1 || page == pagination[:total_pages] || (page >= pagination[:current_page] - 1 && page <= pagination[:current_page] + 1) %>
+      <%= link_to page, path_helper.call(page),
+          link_options.merge(class: "px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors") %>
+    <% elsif page == pagination[:current_page] - 2 || page == pagination[:current_page] + 2 %>
+      <span class="px-3 py-2 text-sm font-medium text-gray-400">...</span>
+    <% end %>
+  <% end %>
+
+  <% if pagination[:has_next] %>
+    <%= link_to path_helper.call(pagination[:next_page]),
+        link_options.merge(class: "px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors") do %>
+      <%= next_text %>
+    <% end %>
+  <% else %>
+    <span class="px-3 py-2 text-sm font-medium text-gray-400 bg-gray-50 border border-gray-200 rounded-lg cursor-not-allowed"><%= next_text %></span>
+  <% end %>
+</div>

data/lib/generators/ruby_cms/templates/views/admin/system_health/index.html.erb

@@ -0,0 +1,248 @@
+<%
+  status_tone   = ->(s) { s == :ok ? "green" : s == :warn ? "amber" : "red" }
+  status_label  = ->(s) { s == :ok ? "Healthy" : s == :warn ? "Warning" : "Down" }
+  overall       = @health[:overall]
+  overall_tone  = status_tone.call(overall)
+  overall_title =
+    case overall
+    when :ok   then "Alle systemen operationeel"
+    when :warn then "Service heeft een waarschuwing"
+    else            "Service is down"
+    end
+
+  badge_class = lambda do |tone|
+    case tone
+    when "green" then "bg-green-50 text-green-700 ring-green-200"
+    when "amber" then "bg-amber-50 text-amber-700 ring-amber-200"
+    when "red"   then "bg-red-50 text-red-700 ring-red-200"
+    else              "bg-gray-50 text-gray-700 ring-gray-200"
+    end
+  end
+
+  rel_time = lambda do |t|
+    next "—" if t.blank?
+    "#{time_ago_in_words(t)} geleden"
+  end
+
+  last_incident = @health[:incidents].first
+%>
+
+<%= AdminPage do %>
+  <%= AdminPageHeader(
+    title: t("ruby_cms.admin.system_health.title", default: "System health"),
+    subtitle: t("ruby_cms.admin.system_health.subtitle", default: "Alle services worden elke 30 seconden gepolled."),
+    breadcrumbs: [
+      { label: t("ruby_cms.admin.breadcrumb.admin", default: "Admin"), url: admin_root_path },
+      { label: t("ruby_cms.admin.system_health.title", default: "System health") }
+    ]
+  ) do %>
+    <%= link_to admin_system_health_path,
+        data: { turbo_action: "replace" },
+        class: "inline-flex items-center gap-1.5 h-8 px-3 rounded-md border border-[#e9e4d4] bg-white text-[#1c1917] text-[12.5px] font-medium hover:bg-[#faf8f3] transition-colors no-underline" do %>
+      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+      <%= t("admin.pages.common.refresh", default: "Vernieuwen") %>
+    <% end %>
+    <%= link_to rails_health_check_path, target: "_blank", rel: "noopener",
+        class: "inline-flex items-center gap-1.5 h-8 px-3 rounded-md border border-[#e9e4d4] bg-white text-[#1c1917] text-[12.5px] font-medium hover:bg-[#faf8f3] transition-colors no-underline" do %>
+      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /></svg>
+      <%= t("ruby_cms.admin.system_health.public_status_page", default: "Status page (publiek)") %>
+    <% end %>
+  <% end %>
+
+  <style>
+    @keyframes adminhealth-ping {
+      0%        { transform: scale(1);   opacity: .6; }
+      75%, 100% { transform: scale(2.2); opacity: 0; }
+    }
+    .adminhealth-pulse { position: relative; width: 56px; height: 56px; border-radius: 9999px; display: grid; place-items: center; flex-shrink: 0; }
+    .adminhealth-pulse > span { position: relative; width: 14px; height: 14px; border-radius: 9999px; z-index: 2; }
+    .adminhealth-pulse::before { content: ''; position: absolute; inset: 0; border-radius: 9999px; animation: adminhealth-ping 1.8s cubic-bezier(0,0,0.2,1) infinite; }
+    .adminhealth-pulse-green > span  { background: #16a34a; box-shadow: 0 0 0 6px #f0fdf4; }
+    .adminhealth-pulse-green::before { background: #16a34a; opacity: 0.18; }
+    .adminhealth-pulse-amber > span  { background: #d97706; box-shadow: 0 0 0 6px #fffbeb; }
+    .adminhealth-pulse-amber::before { background: #d97706; opacity: 0.18; }
+    .adminhealth-pulse-red > span    { background: #ef4444; box-shadow: 0 0 0 6px #fef2f2; }
+    .adminhealth-pulse-red::before   { background: #ef4444; opacity: 0.18; }
+
+    .adminhealth-dot { width: 8px; height: 8px; border-radius: 9999px; flex-shrink: 0; opacity: 0.95; }
+    .adminhealth-dot-green { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
+    .adminhealth-dot-amber { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,.15); }
+    .adminhealth-dot-red   { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
+  </style>
+
+  <div class="px-6 py-5 space-y-5">
+
+    <%# Hero %>
+    <div class="bg-white rounded-2xl border border-[#e9e4d4] shadow-sm px-6 py-5 grid gap-7 items-center"
+         style="grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);">
+      <div class="flex items-center gap-4 min-w-0">
+        <div class="adminhealth-pulse adminhealth-pulse-<%= overall_tone %>"><span></span></div>
+        <div class="min-w-0">
+          <div class="text-base font-semibold tracking-tight text-[#1c1917] truncate"><%= overall_title %></div>
+          <div class="text-xs text-[#78716c] mt-0.5">
+            <%= number_with_precision(@health[:uptime_days], precision: 1) %> dagen uptime<%= last_incident ? " · laatste incident #{rel_time.call(last_incident[:ts])}" : " · geen incidenten" %>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:pl-7 lg:border-l border-[#e9e4d4] min-w-0">
+        <% [
+          [ "Version", @health[:deploy][:version], "font-mono text-sm font-semibold text-[#1c1917]" ],
+          [ "Commit", @health[:deploy][:sha], "font-mono text-xs text-[#57534e]" ],
+          [ "Deployed", rel_time.call(@health[:deploy][:deployed_at]), "text-xs text-[#57534e]" ],
+          [ "Stack", nil, nil ]
+        ].each_with_index do |(label, value, value_class), idx| %>
+          <div class="min-w-0">
+            <div class="text-[10px] font-semibold tracking-wider uppercase text-[#a8a29e]"><%= label %></div>
+            <% if idx == 3 %>
+              <div class="font-mono text-[11px] text-[#57534e] mt-0.5 leading-relaxed">
+                Ruby <%= @health[:deploy][:ruby] %> · Rails <%= @health[:deploy][:rails] %><br>
+                rubycms <%= @health[:deploy][:rubycms] %>
+              </div>
+            <% else %>
+              <div class="<%= value_class %> mt-0.5 truncate"><%= value %></div>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+    <%# Services divider %>
+    <div class="flex items-center gap-3 mt-2">
+      <span class="text-[11px] font-semibold tracking-widest uppercase text-[#a8a29e] whitespace-nowrap">Services</span>
+      <span class="flex-1 h-px bg-[#e9e4d4]"></span>
+    </div>
+
+    <%# Services grid %>
+    <div class="grid gap-3.5" style="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));">
+      <% @health[:services].each do |s| %>
+        <%
+          tone = status_tone.call(s[:status])
+          card_bg =
+            case s[:status]
+            when :warn then "bg-gradient-to-b from-amber-50 to-transparent border-amber-100"
+            when :down then "bg-gradient-to-b from-red-50 to-transparent border-red-100"
+            else            "bg-white border-[#e9e4d4]"
+            end
+        %>
+        <div class="<%= card_bg %> border rounded-xl px-4 py-3.5 flex flex-col gap-1.5">
+          <div class="flex items-center gap-2.5">
+            <span class="adminhealth-dot adminhealth-dot-<%= tone %>"></span>
+            <span class="flex-1 text-[13px] font-semibold text-[#1c1917] truncate"><%= s[:label] %></span>
+            <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md text-[11px] font-medium ring-1 ring-inset <%= badge_class.call(tone) %>">
+              <span class="adminhealth-dot adminhealth-dot-<%= tone %>" style="width:5px; height:5px; box-shadow:none;"></span>
+              <%= status_label.call(s[:status]) %>
+            </span>
+          </div>
+          <div class="text-xs text-[#78716c] truncate"><%= s[:meta] %></div>
+          <div class="flex items-center justify-between mt-1 text-[11px] text-[#78716c]">
+            <span>Response</span>
+            <span class="font-mono <%= s[:lat].to_i > 200 ? "text-amber-700" : "text-[#57534e]" %>"><%= s[:lat] %>ms</span>
+          </div>
+          <% if s[:note].present? %>
+            <div class="mt-1 px-2 py-1.5 bg-amber-50 rounded-md text-[11px] text-amber-700 flex items-start gap-1.5">
+              <svg class="w-3.5 h-3.5 flex-shrink-0 mt-px" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+              <span class="min-w-0 break-words"><%= s[:note] %></span>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+
+    <%# Queues + DB %>
+    <div class="grid gap-3.5 lg:grid-cols-2 mt-2">
+
+      <div class="bg-white border border-[#e9e4d4] rounded-xl flex flex-col overflow-hidden min-w-0">
+        <div class="flex items-center justify-between gap-2.5 px-4 py-3 border-b border-[#e9e4d4]">
+          <div>
+            <p class="text-[13px] font-semibold text-[#1c1917] m-0">Sidekiq queues</p>
+            <p class="text-xs text-[#78716c] mt-0.5 mb-0">Live · wacht &amp; verwerking</p>
+          </div>
+        </div>
+        <div>
+          <div class="flex items-center gap-3 px-4 py-2 border-b border-[#e9e4d4] bg-[#faf8f3] text-[11px] font-semibold tracking-wider uppercase text-[#78716c]">
+            <span class="flex-1">Queue</span>
+            <span class="w-16 text-right">Enq</span>
+            <span class="w-16 text-right">Busy</span>
+            <span class="w-20 text-right">Latency</span>
+          </div>
+          <% if @health[:queues].any? %>
+            <% @health[:queues].each do |q| %>
+              <div class="flex items-center gap-3 px-4 py-2 text-[13px] border-b border-[#f5efde] last:border-b-0 hover:bg-[#faf8f3]">
+                <span class="flex-1 font-mono text-[#57534e] truncate"><%= q[:name] %></span>
+                <span class="w-16 text-right tabular-nums <%= q[:enq].to_i > 0 ? "text-[#1c1917] font-semibold" : "text-[#a8a29e]" %>"><%= q[:enq] %></span>
+                <span class="w-16 text-right tabular-nums <%= q[:busy].to_i > 0 ? "text-blue-700 font-semibold" : "text-[#a8a29e]" %>"><%= q[:busy] %></span>
+                <span class="w-20 text-right tabular-nums <%= q[:latency].to_i > 60 ? "text-amber-700" : "text-[#78716c]" %>"><%= q[:latency] %>s</span>
+              </div>
+            <% end %>
+          <% else %>
+            <div class="px-4 py-10 text-center text-xs text-[#a8a29e]">Geen Sidekiq queues geconfigureerd.</div>
+          <% end %>
+        </div>
+      </div>
+
+      <div class="bg-white border border-[#e9e4d4] rounded-xl flex flex-col overflow-hidden min-w-0">
+        <div class="flex items-center justify-between gap-2.5 px-4 py-3 border-b border-[#e9e4d4]">
+          <div>
+            <p class="text-[13px] font-semibold text-[#1c1917] m-0">Database</p>
+            <p class="text-xs text-[#78716c] mt-0.5 mb-0"><%= @health[:db][:size_mb] %> MB · <%= @health[:db][:tables].size %> tabellen</p>
+          </div>
+        </div>
+        <div>
+          <div class="flex items-center gap-3 px-4 py-2 border-b border-[#e9e4d4] bg-[#faf8f3] text-[11px] font-semibold tracking-wider uppercase text-[#78716c]">
+            <span class="flex-1">Tabel</span>
+            <span class="w-20 text-right">Rijen</span>
+            <span class="w-20 text-right">Indexen</span>
+          </div>
+          <% if @health[:db][:tables].any? %>
+            <% @health[:db][:tables].each do |t| %>
+              <div class="flex items-center gap-3 px-4 py-2 text-[13px] border-b border-[#f5efde] last:border-b-0 hover:bg-[#faf8f3]">
+                <span class="flex-1 font-mono text-[#57534e] truncate"><%= t[:name] %></span>
+                <span class="w-20 text-right tabular-nums text-[#1c1917] font-medium"><%= number_with_delimiter(t[:rows]) %></span>
+                <span class="w-20 text-right text-[#78716c]"><%= t[:indexes] %></span>
+              </div>
+            <% end %>
+          <% else %>
+            <div class="px-4 py-10 text-center text-xs text-[#a8a29e]">Geen tabellen gevonden.</div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+
+    <%# Incidents divider %>
+    <div class="flex items-center gap-3 mt-2">
+      <span class="text-[11px] font-semibold tracking-widest uppercase text-[#a8a29e] whitespace-nowrap">Incidents — laatste 30 dagen</span>
+      <span class="flex-1 h-px bg-[#e9e4d4]"></span>
+    </div>
+
+    <div class="bg-white border border-[#e9e4d4] rounded-xl overflow-hidden">
+      <% if @health[:incidents].any? %>
+        <div class="divide-y divide-[#f5efde]">
+          <% @health[:incidents].each do |i| %>
+            <div class="px-4 py-3 flex items-center gap-3">
+              <% tone = i[:kind] == :down ? "red" : "amber" %>
+              <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md text-[11px] font-medium ring-1 ring-inset <%= badge_class.call(tone) %>">
+                <span class="adminhealth-dot adminhealth-dot-<%= tone %>" style="width:5px; height:5px; box-shadow:none;"></span>
+                <%= i[:kind].to_s %>
+              </span>
+              <div class="flex-1 min-w-0">
+                <div class="text-[13px] font-medium text-[#1c1917] truncate">
+                  <%= i[:service] %> · <%= i[:summary] %>
+                </div>
+              </div>
+              <span class="text-xs text-[#78716c] flex-shrink-0"><%= rel_time.call(i[:ts]) %></span>
+            </div>
+          <% end %>
+        </div>
+      <% else %>
+        <div class="px-4 py-10 text-center">
+          <div class="text-sm font-medium text-[#57534e]">Geen incidenten in de laatste 30 dagen.</div>
+          <div class="text-xs text-[#a8a29e] mt-1">Incident-tracking volgt zodra het <code class="font-mono">HealthIncident</code>-model live is.</div>
+        </div>
+      <% end %>
+    </div>
+
+  </div>
+<% end %>

data/lib/generators/ruby_cms/templates/views/admin/trash/index.html.erb

@@ -0,0 +1,58 @@
+<%= AdminPage do %>
+  <%= AdminPageHeader(
+    title: t("ruby_cms.admin.trash.title", default: "Prullenbak"),
+    subtitle: "#{@total} items in prullenbak",
+    breadcrumbs: admin_crumbs(t("ruby_cms.admin.trash.title", default: "Prullenbak"))
+  ) %>
+
+  <div class="px-4 py-4 space-y-5">
+    <% if @groups.empty? %>
+      <div class="text-center py-12 text-[#78716c]">
+        <div class="inline-flex w-12 h-12 rounded-full bg-green-50 text-green-700 items-center justify-center mb-3">
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+        </div>
+        <div class="text-[14px] font-medium text-[#1c1917]">Prullenbak is leeg.</div>
+        <div class="text-[12px] mt-1">Verwijderde items komen hier en kunnen 30 dagen worden hersteld.</div>
+      </div>
+    <% end %>
+
+    <% @groups.each do |group| %>
+      <section class="rounded-lg border border-[#e9e4d4] bg-white overflow-hidden">
+        <header class="flex items-center justify-between px-3 py-2.5 border-b border-[#e9e4d4] bg-[#faf8f3]">
+          <div class="flex items-center gap-2">
+            <h3 class="text-[13.5px] font-semibold text-[#1c1917] m-0"><%= group[:label] %></h3>
+            <%= status_pill(:neutral, "#{group[:items].size} items", dot: false) %>
+          </div>
+        </header>
+        <div class="divide-y divide-[#f5efde]">
+          <% group[:items].each do |item| %>
+            <%
+              label = [ :title, :name, :email_address, :email, :key, :request_path, :source_path ].find_map { |m| item.respond_to?(m) ? item.public_send(m) : nil }.first.to_s.presence || "##{item.id}"
+              # Take first non-nil/non-blank attribute as label.
+              label = "##{item.id}" if label.blank?
+            %>
+            <div class="flex items-center gap-3 px-3 py-2">
+              <div class="flex-1 min-w-0">
+                <div class="text-[13px] text-[#1c1917] truncate"><%= label %></div>
+                <div class="text-[11.5px] text-[#78716c]">verwijderd <%= rel_time(item.discarded_at) %></div>
+              </div>
+              <%= button_to restore_trash_path(model: group[:slug], id: item.id),
+                            method: :post,
+                            class: "inline-flex items-center gap-1 h-7 px-2.5 rounded-md border border-[#e9e4d4] bg-white text-[11.5px] font-medium text-[#1c1917] hover:bg-[#faf8f3] transition-colors cursor-pointer" do %>
+                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" /></svg>
+                Herstel
+              <% end %>
+              <%= button_to purge_trash_path(model: group[:slug], id: item.id),
+                            method: :delete,
+                            data: { turbo_confirm: "Permanent verwijderen? Dit kan niet ongedaan worden gemaakt." },
+                            class: "inline-flex items-center gap-1 h-7 px-2.5 rounded-md border border-red-100 bg-white text-[11.5px] font-medium text-red-600 hover:bg-red-50 transition-colors cursor-pointer" do %>
+                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
+                Wis
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+      </section>
+    <% end %>
+  </div>
+<% end %>