ruby_cms 0.1.1 → 0.1.3

data/app/javascript/controllers/ruby_cms/bulk_action_table_controller.js

@@ -112,8 +112,7 @@ export default class extends Controller {
 
     if (count > 0) {
       bulkBar.classList.remove("hidden");
-      const itemName = this.itemNameValue || "item";
-      selectedCount.textContent = `${count} ${itemName}${count === 1 ? "" : "s"} selected:`;
+      selectedCount.textContent = `${count}`;
     } else {
       bulkBar.classList.add("hidden");
     }
@@ -143,10 +142,14 @@ export default class extends Controller {
       const itemId = String(row.getAttribute("data-item-id") || "");
       if (selectedIdsStr.includes(itemId)) {
         row.setAttribute("data-state", "selected");
-        row.classList.add("bg-gray-50");
+        row.classList.add("bg-primary/5");
+        row.classList.remove("hover:bg-muted/50");
       } else {
         row.removeAttribute("data-state");
-        row.classList.remove("bg-gray-50");
+        row.classList.remove("bg-primary/5");
+        if (!row.classList.contains("hover:bg-muted/50")) {
+          row.classList.add("hover:bg-muted/50");
+        }
       }
     });
   }
@@ -302,6 +305,41 @@ export default class extends Controller {
     this.isProcessing = false;
   }
 
+  rowClick(event) {
+    const row = event.currentTarget;
+    const target = event.target;
+
+    if (
+      target.closest('input[type="checkbox"]') ||
+      target.closest("button") ||
+      target.closest("a") ||
+      target.closest("[data-action*='stopPropagation']")
+    ) {
+      return;
+    }
+
+    if (event.ctrlKey || event.metaKey) {
+      event.preventDefault();
+      const checkbox = row.querySelector(
+        'input[type="checkbox"][data-item-id]',
+      );
+      if (checkbox) {
+        checkbox.checked = !checkbox.checked;
+        this.updateBulkBar();
+      }
+      return;
+    }
+
+    const clickUrl = row.dataset.clickUrl;
+    if (clickUrl) {
+      if (window.Turbo) {
+        window.Turbo.visit(clickUrl);
+      } else {
+        window.location.href = clickUrl;
+      }
+    }
+  }
+
   stopPropagation(event) {
     event.stopPropagation();
   }
@@ -517,20 +555,23 @@ export default class extends Controller {
 
   showNotification(message, type = "info") {
     const toast = document.createElement("div");
-    toast.className = `fixed top-4 right-4 z-50 px-4 py-2 rounded-md shadow-lg text-white max-w-sm ${
-      type === "success"
-        ? "bg-green-600"
-        : type === "error"
-          ? "bg-red-600"
-          : "bg-blue-600"
+    const colorMap = {
+      success: "bg-emerald-600",
+      error: "bg-destructive",
+      info: "bg-primary",
+    };
+    toast.className = `fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg text-white text-sm max-w-sm animate-in slide-in-from-top-2 ${
+      colorMap[type] || colorMap.info
     }`;
     toast.textContent = message;
 
     document.body.appendChild(toast);
 
     setTimeout(() => {
-      toast.remove();
-    }, 5000);
+      toast.style.opacity = "0";
+      toast.style.transition = "opacity 200ms ease-out";
+      setTimeout(() => toast.remove(), 200);
+    }, 4000);
   }
 
   clearItemIdsFromUrl() {

data/app/models/ruby_cms/permission.rb

@@ -9,20 +9,49 @@ module RubyCms
 
     validates :key, presence: true, uniqueness: true
 
-    DEFAULT_KEYS = %w[
-      manage_admin
-      manage_permissions
-      manage_content_blocks
-      manage_visitor_errors
-      manage_analytics
-    ].freeze
+    DEFAULT_KEYS = RubyCms::DEFAULT_PERMISSION_KEYS
 
     class << self
       def ensure_defaults!
-        DEFAULT_KEYS.each do |k|
-          find_or_create_by!(key: k) {|p| p.name = k.humanize }
+        all_keys.each do |k|
+          find_or_create_by!(key: k) {|p| p.name = k.titleize }
         end
       end
+
+      def all_keys
+        (DEFAULT_KEYS + RubyCms.extra_permission_keys.map(&:to_s)).uniq.freeze
+      end
+
+      def templates
+        RubyCms.permission_templates
+      end
+
+      def register_keys(*keys)
+        RubyCms.register_permission_keys(*keys)
+      end
+
+      def register_template(name, label:, keys:, description: nil)
+        RubyCms.register_permission_template(name, label:, keys:, description:)
+      end
+
+      def apply_template!(user, template_name)
+        tmpl = templates[template_name.to_sym]
+        raise ArgumentError, "Unknown template: #{template_name}" unless tmpl
+
+        ensure_defaults!
+        perms = where(key: tmpl[:keys])
+        perms.each do |perm|
+          RubyCms::UserPermission.find_or_create_by!(user: user, permission: perm)
+        end
+      end
+
+      def matching_templates(user)
+        user_keys = RubyCms::UserPermission.where(user:)
+                                           .joins(:permission)
+                                           .pluck("permissions.key")
+        templates.select {|_, tmpl| (tmpl[:keys] - user_keys).empty? }
+                 .keys
+      end
     end
   end
 end

data/app/models/ruby_cms/permittable.rb

@@ -12,9 +12,7 @@ module RubyCms
       k = permission_key.to_s
       return false unless RubyCms::Permission.exists?(key: k)
 
-      # Treat manage_admin as a super-permission for admin features.
       cms_permission_keys_cached.include?(k) ||
-        cms_permission_keys_cached.include?("manage_admin") ||
         record&.can_edit?(self)
     end
 

data/app/services/ruby_cms/analytics/report.rb

@@ -25,10 +25,18 @@ module RubyCms
 
       def dashboard_stats
         Rails.cache.fetch(cache_key("dashboard"), expires_in: cache_duration) do
+          total_views = page_view_events.count
+          total_sessions = visits.distinct.count(:visit_token)
+          unique_visitors = visits.distinct.count(:visitor_token)
+
           {
-            total_page_views: page_view_events.count,
-            unique_visitors: visits.distinct.count(:visitor_token),
-            total_sessions: visits.distinct.count(:visit_token),
+            total_page_views: total_views,
+            unique_visitors: unique_visitors,
+            total_sessions: total_sessions,
+            pages_per_session: total_sessions.positive? ? (total_views.to_f / total_sessions).round(1) : 0,
+            bounce_rate: compute_bounce_rate,
+            new_visitor_percentage: compute_new_visitor_percentage,
+            avg_daily_views: days_in_range.positive? ? (total_views.to_f / days_in_range).round(0).to_i : 0,
             popular_pages: popular_pages_data,
             top_visitors: top_visitors_data,
             hourly_activity: hourly_activity_data,
@@ -339,6 +347,32 @@ module RubyCms
         []
       end
 
+      def compute_bounce_rate
+        total = visits.distinct.count(:visit_token)
+        return 0 unless total.positive?
+
+        event_counts = page_view_events.group(:visit_id).count
+        single_page = event_counts.count { |_, c| c == 1 }
+        ((single_page.to_f / total) * 100).round(1)
+      rescue StandardError
+        0
+      end
+
+      def compute_new_visitor_percentage
+        total = visits.distinct.count(:visitor_token)
+        return 0 unless total.positive?
+
+        returning_tokens = Ahoy::Visit
+          .where("started_at < ?", @start_date)
+          .distinct
+          .pluck(:visitor_token)
+
+        new_count = visits.where.not(visitor_token: returning_tokens).distinct.count(:visitor_token)
+        ((new_count.to_f / total) * 100).round(0).to_i
+      rescue StandardError
+        0
+      end
+
       def days_in_range
         (@end_date.to_date - @start_date.to_date + 1).to_i
       end

data/app/views/layouts/ruby_cms/_admin_sidebar.html.erb

@@ -76,7 +76,7 @@
 
   <div class="px-3 py-3 flex-shrink-0 bg-[#FAF9F5]" data-ruby-cms--mobile-menu-target="sidebarContent">
     <div class="mb-2">
-      <%= form_with url: ruby_cms_admin_locale_path, method: :patch, scope: nil, data: { turbo: true } do |form| %>
+      <%= form_with url: ruby_cms_admin_locale_path, method: :patch, scope: nil, data: { turbo: false } do |form| %>
         <div class="relative">
           <div class="flex items-center gap-3 w-full px-3 py-2.5 text-sm font-medium text-gray-600 rounded-md no-underline transition-colors hover:bg-blue-500 hover:text-white">
             <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -94,7 +94,7 @@
               {
                 class: "absolute inset-0 w-full h-full opacity-0 cursor-pointer",
                 aria: { label: "Locale" },
-                onchange: "this.form.requestSubmit()"
+                onchange: "this.form.submit()"
               } %>
         </div>
       <% end %>

data/app/views/layouts/ruby_cms/admin.html.erb

@@ -39,34 +39,30 @@
         <% else %>
           <div class="flex-1 flex flex-col min-h-0 p-6 overflow-y-auto bg-gray-50">
             <div class="mx-auto w-full max-w-7xl">
+            <%# Page header – prefer AdminPageHeader component rendered by views.
+                Legacy content_for fallback kept for pages that haven't migrated. %>
             <% if content_for?(:title) || content_for?(:header_actions) %>
-              <header class="flex-shrink-0 mb-4 <%= yield(:header_styles) if content_for?(:header_styles) %>">
+              <header class="flex-shrink-0 mb-4">
+                <% if content_for?(:breadcrumbs) %>
+                  <nav class="mb-1 text-sm text-muted-foreground" aria-label="Breadcrumb">
+                    <ol class="flex items-center flex-wrap gap-y-1">
+                      <%= yield :breadcrumbs %>
+                    </ol>
+                  </nav>
+                <% end %>
                 <div class="flex flex-wrap items-center justify-between gap-4">
-                  <div>
+                  <div class="min-w-0">
                     <% if content_for?(:title) %>
-                      <h1 class="text-lg font-semibold tracking-tight text-gray-900"><%= yield :title %></h1>
-                    <% end %>
-                    <% if content_for?(:breadcrumbs) %>
-                      <nav class="mt-0.5 text-sm text-gray-500" aria-label="Breadcrumb">
-                        <ol class="flex items-center flex-wrap gap-x-2 gap-y-1">
-                          <%= yield :breadcrumbs %>
-                        </ol>
-                      </nav>
+                      <h1 class="text-lg font-semibold tracking-tight text-foreground"><%= yield :title %></h1>
                     <% end %>
                   </div>
                   <% if content_for?(:header_actions) %>
-                    <div class="flex items-center flex-shrink-0">
+                    <div class="flex items-center gap-3 flex-shrink-0">
                       <%= yield :header_actions %>
                     </div>
                   <% end %>
                 </div>
               </header>
-            <% elsif content_for?(:breadcrumbs) %>
-              <nav class="mb-4" aria-label="Breadcrumb">
-                <ol class="flex items-center space-x-2 text-sm text-gray-600">
-                  <%= content_for :breadcrumbs %>
-                </ol>
-              </nav>
             <% end %>
 
             <%= render "layouts/ruby_cms/admin_flash_messages" %>

data/app/views/ruby_cms/admin/analytics/index.html.erb

@@ -3,9 +3,10 @@
   subtitle: t("ruby_cms.admin.analytics.subtitle", default: "Traffic and engagement overview"),
   content_card: false
 ) do %>
-  <div class="space-y-6">
-    <div class="flex items-start justify-between gap-4">
-      <div class="inline-flex items-center rounded-lg bg-gray-100 p-1">
+  <div class="space-y-4">
+    <%# ── Period selector + date range ── %>
+    <div class="flex flex-wrap items-start justify-between gap-4">
+      <div class="inline-flex items-center rounded-lg border border-border/60 bg-white p-1 shadow-sm">
         <% [["Day", "day"], ["Week", "week"], ["Month", "month"], ["Year", "year"]].each do |label, value| %>
           <% start_date = case value
                          when "day" then Date.current
@@ -16,143 +17,137 @@
           <% active = params[:period] == value || (params[:period].blank? && value == @period.to_s) %>
           <%= link_to label,
                       ruby_cms_admin_analytics_path(start_date:, end_date: Date.current, period: value),
-                      class: "px-3 py-1.5 text-sm font-medium rounded-md transition #{active ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'}" %>
+                      class: "px-3 py-1.5 text-sm font-medium rounded-md transition-colors #{active ? 'bg-primary text-primary-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}" %>
         <% end %>
       </div>
 
       <%= form_with url: ruby_cms_admin_analytics_path, method: :get, local: true, class: "flex items-end gap-2" do |f| %>
         <%= f.hidden_field :period, value: @period %>
         <div class="flex flex-col gap-1">
-          <span class="text-xs font-medium text-gray-500">From</span>
-          <%= f.date_field :start_date, value: @start_date, class: "h-9 rounded-md border border-gray-200 bg-white px-3 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-200" %>
+          <span class="text-xs font-medium text-muted-foreground">From</span>
+          <%= f.date_field :start_date, value: @start_date, class: "h-9 rounded-md border border-border bg-white px-3 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/20" %>
         </div>
         <div class="flex flex-col gap-1">
-          <span class="text-xs font-medium text-gray-500">To</span>
-          <%= f.date_field :end_date, value: @end_date, class: "h-9 rounded-md border border-gray-200 bg-white px-3 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-200" %>
+          <span class="text-xs font-medium text-muted-foreground">To</span>
+          <%= f.date_field :end_date, value: @end_date, class: "h-9 rounded-md border border-border bg-white px-3 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/20" %>
         </div>
         <%= f.submit t("ruby_cms.admin.analytics.apply_filters", default: "Apply"),
-                     class: "h-9 inline-flex items-center justify-center rounded-md bg-gray-900 px-4 text-sm font-medium text-white shadow-sm hover:bg-gray-800 transition-colors" %>
+                     class: "h-9 inline-flex items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow-sm hover:bg-primary/90 transition-colors cursor-pointer" %>
       <% end %>
     </div>
 
-    <div class="grid grid-cols-3 gap-4">
-      <div class="rounded-lg border border-gray-200/80 bg-white p-5 shadow-sm">
-        <p class="text-sm font-medium text-gray-500"><%= t("ruby_cms.admin.analytics.total_page_views", default: "Total page views") %></p>
-        <p class="mt-2 text-3xl font-semibold tracking-tight text-gray-900 tabular-nums"><%= number_with_delimiter(@total_page_views) %></p>
+    <%# ── Stat cards ── %>
+    <div class="grid grid-cols-2 lg:grid-cols-4 gap-2">
+      <div class="rounded-lg border border-border/60 bg-white p-2 shadow-sm">
+        <div class="flex items-center justify-between">
+          <p class="text-sm font-medium text-muted-foreground"><%= t("ruby_cms.admin.analytics.total_page_views", default: "Page Views") %></p>
+        </div>
+        <div class="mt-1 flex items-baseline gap-2">
+          <p class="text-lg font-semibold tracking-tight text-foreground tabular-nums"><%= number_with_delimiter(@total_page_views) %></p>
+        </div>
+        <p class="mt-0.5 text-[10px] text-muted-foreground">~<%= number_with_delimiter(@avg_daily_views) %> / day</p>
+      </div>
+
+      <div class="rounded-lg border border-border/60 bg-white p-2 shadow-sm">
+        <div class="flex items-center justify-between">
+          <p class="text-sm font-medium text-muted-foreground"><%= t("ruby_cms.admin.analytics.unique_visitors", default: "Unique Visitors") %></p>
+        </div>
+        <div class="mt-1 flex items-baseline gap-2">
+          <p class="text-lg font-semibold tracking-tight text-foreground tabular-nums"><%= number_with_delimiter(@unique_visitors) %></p>
+          <% if @new_visitor_percentage.to_i > 0 %>
+            <span class="inline-flex items-center text-xs font-medium text-emerald-600">
+              <svg class="w-3 h-3 mr-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
+              <%= @new_visitor_percentage %>% new
+            </span>
+          <% end %>
+        </div>
+        <p class="mt-0.5 text-[10px] text-muted-foreground">Distinct visitor tokens</p>
       </div>
-      <div class="rounded-lg border border-gray-200/80 bg-white p-5 shadow-sm">
-        <p class="text-sm font-medium text-gray-500"><%= t("ruby_cms.admin.analytics.unique_visitors", default: "Unique visitors") %></p>
-        <p class="mt-2 text-3xl font-semibold tracking-tight text-gray-900 tabular-nums"><%= number_with_delimiter(@unique_visitors) %></p>
+
+      <div class="rounded-lg border border-border/60 bg-white p-2 shadow-sm">
+        <div class="flex items-center justify-between">
+          <p class="text-sm font-medium text-muted-foreground"><%= t("ruby_cms.admin.analytics.total_sessions", default: "Sessions") %></p>
+        </div>
+        <div class="mt-1 flex items-baseline gap-2">
+          <p class="text-lg font-semibold tracking-tight text-foreground tabular-nums"><%= number_with_delimiter(@total_sessions) %></p>
+        </div>
+        <p class="mt-0.5 text-[10px] text-muted-foreground"><%= @pages_per_session %> pages / session</p>
       </div>
-      <div class="rounded-lg border border-gray-200/80 bg-white p-5 shadow-sm">
-        <p class="text-sm font-medium text-gray-500"><%= t("ruby_cms.admin.analytics.total_sessions", default: "Total sessions") %></p>
-        <p class="mt-2 text-3xl font-semibold tracking-tight text-gray-900 tabular-nums"><%= number_with_delimiter(@total_sessions) %></p>
+
+      <div class="rounded-lg border border-border/60 bg-white p-2 shadow-sm">
+        <div class="flex items-center justify-between">
+          <p class="text-sm font-medium text-muted-foreground"><%= t("ruby_cms.admin.analytics.bounce_rate", default: "Bounce Rate") %></p>
+        </div>
+        <div class="mt-1 flex items-baseline gap-2">
+          <p class="text-lg font-semibold tracking-tight text-foreground tabular-nums"><%= @bounce_rate %>%</p>
+          <span class="inline-flex items-center text-xs font-medium <%= @bounce_rate.to_f > 70 ? 'text-destructive' : @bounce_rate.to_f > 50 ? 'text-amber-600' : 'text-emerald-600' %>">
+            <%= @bounce_rate.to_f > 70 ? "High" : @bounce_rate.to_f > 50 ? "Average" : "Good" %>
+          </span>
+        </div>
+        <p class="mt-0.5 text-[10px] text-muted-foreground">Single-page sessions</p>
       </div>
     </div>
 
-    <div class="grid grid-cols-2 gap-4">
+    <%# ── Charts ── %>
+    <div class="grid grid-cols-1 xl:grid-cols-2 gap-2">
       <%= render "ruby_cms/admin/analytics/partials/daily_activity_chart" %>
       <%= render "ruby_cms/admin/analytics/partials/hourly_activity_chart" %>
     </div>
 
-    <div class="grid grid-cols-3 gap-4">
-      <div class="col-span-2 rounded-lg border border-gray-200/80 bg-white shadow-sm">
-        <div class="flex items-center justify-between gap-4 px-6 py-4 border-b border-gray-100">
-          <div>
-            <p class="text-sm font-semibold text-gray-900"><%= t("ruby_cms.admin.analytics.popular_pages", default: "Popular pages") %></p>
-            <p class="text-sm text-gray-500">Most viewed pages in selected range.</p>
-          </div>
-        </div>
-
-        <% if @popular_pages.present? %>
-          <div class="divide-y divide-gray-100">
-            <% @popular_pages.first(8).each_with_index do |(page_name, count), idx| %>
-              <div class="flex items-center justify-between gap-4 px-6 py-4">
-                <div class="min-w-0">
-                  <p class="text-sm font-medium text-gray-900 truncate"><%= "#{idx + 1}. #{page_name}" %></p>
-                  <p class="text-sm text-gray-500">Page</p>
-                </div>
-                <div class="flex items-center gap-3 flex-shrink-0">
-                  <span class="text-sm font-semibold tabular-nums text-gray-900"><%= number_with_delimiter(count) %></span>
-                  <%= link_to "Details",
-                              page_details_ruby_cms_admin_analytics_path(page_name:, start_date: @start_date, end_date: @end_date, period: @period),
-                              class: "text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors" %>
-                </div>
-              </div>
-            <% end %>
-          </div>
-        <% else %>
-          <div class="px-6 py-12 text-center">
-            <p class="text-sm font-medium text-gray-900"><%= t("ruby_cms.admin.analytics.no_data", default: "No data yet.") %></p>
-            <p class="mt-1 text-sm text-gray-500">Track some traffic to see page analytics.</p>
-          </div>
-        <% end %>
+    <%# ── Content: pages + visitors ── %>
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
+      <div class="lg:col-span-2">
+        <%= render "ruby_cms/admin/analytics/partials/popular_pages" %>
       </div>
+      <%= render "ruby_cms/admin/analytics/partials/top_visitors" %>
+    </div>
 
-      <div class="rounded-lg border border-gray-200/80 bg-white shadow-sm">
-        <div class="flex items-center justify-between gap-4 px-6 py-4 border-b border-gray-100">
-          <div>
-            <p class="text-sm font-semibold text-gray-900"><%= t("ruby_cms.admin.analytics.top_visitors", default: "Top visitors") %></p>
-            <p class="text-sm text-gray-500">Most active IPs.</p>
-          </div>
-        </div>
+    <%# ── Sources & tech ── %>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+      <%= render "ruby_cms/admin/analytics/partials/top_referrers" %>
+      <%= render "ruby_cms/admin/analytics/partials/landing_pages" %>
+      <%= render "ruby_cms/admin/analytics/partials/utm_sources" %>
+    </div>
 
-        <% if @top_visitors.present? %>
-          <div class="divide-y divide-gray-100">
-            <% @top_visitors.first(6).each_with_index do |(ip, count), idx| %>
-              <div class="flex items-center justify-between gap-4 px-6 py-4">
-                <p class="text-sm font-medium text-gray-900 tabular-nums truncate"><%= "#{idx + 1}. #{ip}" %></p>
-                <div class="flex items-center gap-3 flex-shrink-0">
-                  <span class="text-sm font-semibold tabular-nums text-gray-900"><%= number_with_delimiter(count) %></span>
-                  <%= link_to "Details",
-                              visitor_details_ruby_cms_admin_analytics_path(ip_address: ip, start_date: @start_date, end_date: @end_date, period: @period),
-                              class: "text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors" %>
-                </div>
-              </div>
-            <% end %>
-          </div>
-        <% else %>
-          <div class="px-6 py-12 text-center">
-            <p class="text-sm font-medium text-gray-900"><%= t("ruby_cms.admin.analytics.no_data", default: "No data yet.") %></p>
-            <p class="mt-1 text-sm text-gray-500">No visitors in selected range.</p>
-          </div>
-        <% end %>
-      </div>
+    <%# ── Tech & activity ── %>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+      <%= render "ruby_cms/admin/analytics/partials/browser_device" %>
+      <%= render "ruby_cms/admin/analytics/partials/os_stats" %>
+      <%= render "ruby_cms/admin/analytics/partials/recent_activity" %>
     </div>
 
-    <div class="grid grid-cols-3 gap-4">
-      <div class="rounded-lg border border-gray-200/80 bg-white shadow-sm">
-        <div class="px-6 py-4 border-b border-gray-100">
-          <p class="text-sm font-semibold text-gray-900"><%= t("ruby_cms.admin.analytics.suspicious_activity", default: "Suspicious activity") %></p>
-          <p class="text-sm text-gray-500">Potential bot-like traffic signals.</p>
+    <%# ── Suspicious activity ── %>
+    <% if @suspicious_activity.present? %>
+      <div class="rounded-lg border border-amber-200 bg-amber-50/50 shadow-sm">
+        <div class="px-3 py-2 border-b border-amber-200/60">
+          <p class="text-sm font-semibold text-amber-900 flex items-center gap-2">
+            <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="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"></path></svg>
+            <%= t("ruby_cms.admin.analytics.suspicious_activity", default: "Suspicious activity") %>
+          </p>
+          <p class="text-sm text-amber-700/80 mt-0.5">Potential bot-like traffic signals.</p>
         </div>
-        <div class="px-6 py-4">
-          <% if @suspicious_activity.present? %>
-            <ul class="space-y-2">
-              <% @suspicious_activity.first(6).each do |item| %>
-                <li class="flex items-center justify-between gap-3">
-                  <span class="text-sm text-gray-700"><%= item[:description] %></span>
-                  <span class="text-sm font-semibold tabular-nums text-gray-900"><%= number_with_delimiter(item[:count]) %></span>
-                </li>
-              <% end %>
-            </ul>
-          <% else %>
-            <p class="text-sm text-gray-500"><%= t("ruby_cms.admin.analytics.none_detected", default: "None detected in selected range.") %></p>
+        <div class="px-3 py-2 divide-y divide-amber-200/40">
+          <% @suspicious_activity.first(6).each do |item| %>
+            <div class="flex items-center justify-between gap-3 py-2 first:pt-0 last:pb-0">
+              <span class="text-sm text-amber-800"><%= item[:description] %></span>
+              <span class="text-sm font-semibold tabular-nums text-amber-900"><%= number_with_delimiter(item[:count]) %></span>
+            </div>
           <% end %>
         </div>
       </div>
+    <% end %>
 
-      <%= render "ruby_cms/admin/analytics/partials/recent_activity" %>
-      <%= render "ruby_cms/admin/analytics/partials/top_referrers" %>
-      <%= render "ruby_cms/admin/analytics/partials/browser_device" %>
-    </div>
-
-    <% Array(@extra_cards).each do |card| %>
-      <div class="rounded-lg border border-gray-200/80 bg-white p-6 shadow-sm">
-        <p class="text-sm font-semibold text-gray-900"><%= card[:title].to_s %></p>
-        <p class="mt-2 text-2xl font-semibold tracking-tight text-gray-900"><%= card[:value].to_s %></p>
-        <% if card[:description].present? %>
-          <p class="mt-1 text-sm text-gray-500"><%= card[:description] %></p>
+    <%# ── Extra cards hook ── %>
+    <% if Array(@extra_cards).any? %>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+        <% @extra_cards.each do |card| %>
+          <div class="rounded-lg border border-border/60 bg-white p-3 shadow-sm">
+            <p class="text-sm font-medium text-muted-foreground"><%= card[:title].to_s %></p>
+            <p class="mt-1 text-xl font-semibold tracking-tight text-foreground"><%= card[:value].to_s %></p>
+            <% if card[:description].present? %>
+              <p class="mt-1 text-[11px] text-muted-foreground"><%= card[:description] %></p>
+            <% end %>
+          </div>
         <% end %>
       </div>
     <% end %>