ruby_cms 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e1a4b15129e38c223a849cc78aff0bd173af8a104a07acc0f7195298475f4420
-  data.tar.gz: a9ea71bfc0ddcb2a89ba1ec85acd3fd7f9cc03799aa91e0e1eb805a081b1b6aa
+  metadata.gz: b498f6774c5c9d39e255eb655c136925ac8af538a48edb49c9db3421c17388bb
+  data.tar.gz: e9d077f831552bdf815afa1af9468b5dd895fed1f809cb7f2a748c44492c6c66
 SHA512:
-  metadata.gz: a2b7113dbd5bae7fd3233398459efca6c3f497f54d22f63d9a4b7db0577d27cb4db73abf4ebb93b3f981ca5f33d34f458af08bc75bf74bb0dfb1f5cf02783625
-  data.tar.gz: 33442c384ce70c04a1a7420632225e3a282c9929b29d28a76b92dcb76dd19d5ab15957e0c4b70bfca34dcb59b1f5ab72d7c2e388b0d2b50913dc9f67d3a30350
+  metadata.gz: 057ace1576f400a416183a52bb14651c71bab4384ceeddcbf951b1ab17d781c8548fe41af9b45ccdadef33515f42399241568ba480d69cbb056adcc46e1e5a5a
+  data.tar.gz: 7a02feff4b17fc21391c50c0c745e90a9e4d653cf53d1ed0c7ab6f74ddb599787585fd9353c623fa7a9c4457e034ab286d8e9e90b0e1fe7017da67cce11c82ce

data/CHANGELOG.md

@@ -1,5 +1,10 @@
 ## [Unreleased]
 
+## [0.1.3] - 2026-03-23
+
+- Update analytics pages (dashboard/detail views)
+- Update admin settings UI (including bulk action table)
+
 ## [0.1.2] - 2026-03-23
 
 - Update settings page and the bulk action table

data/app/components/ruby_cms/admin/admin_page_header.rb

@@ -71,10 +71,8 @@ module RubyCms
         end
       end
 
-      def render_actions(&block)
-        div(class: "flex items-center gap-3 flex-shrink-0") do
-          yield
-        end
+      def render_actions(&)
+        div(class: "flex items-center gap-3 flex-shrink-0", &)
       end
     end
   end

data/app/components/ruby_cms/admin/admin_resource_card.rb

@@ -47,8 +47,8 @@ module RubyCms
       CANCEL_CLASS = "inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg border border-border bg-background text-foreground hover:bg-muted transition-colors"
       SUBMIT_CLASS = "inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm transition-colors"
 
-      def view_template(&block)
-        div(class: CARD_CLASS, &block)
+      def view_template(&)
+        div(class: CARD_CLASS, &)
       end
     end
   end

data/app/components/ruby_cms/admin/bulk_action_table/bulk_actions.rb

@@ -42,36 +42,49 @@ module RubyCms
 
         def render_selection_info
           div(class: "flex items-center gap-3") do
-            div(class: "flex items-center gap-2") do
-              div(class: "size-6 rounded-full bg-primary/10 flex items-center justify-center") do
-                span(
-                  class: "text-xs font-bold text-primary tabular-nums",
-                  data: {
-                    "#{@controller_name}-target": "selectedCount"
-                  }
-                ) { "0" }
-              end
-              span(class: "text-sm font-medium text-foreground") { "selected" }
-            end
+            render_selection_left
             div(class: "h-4 w-px bg-border/60")
-            button(
-              type: "button",
-              class: "text-xs font-medium text-muted-foreground hover:text-foreground transition-colors",
-              data: {
-                "#{@controller_name}-target": "selectAllButton",
-                action: "click->#{@controller_name}#selectAll"
-              }
-            ) { "Select all" }
-            button(
-              type: "button",
-              class: "text-xs font-medium text-muted-foreground hover:text-foreground transition-colors",
+            render_selection_buttons
+          end
+        end
+
+        def render_selection_left
+          div(class: "flex items-center gap-2") do
+            render_selected_count_badge
+            span(class: "text-sm font-medium text-foreground") { "selected" }
+          end
+        end
+
+        def render_selected_count_badge
+          div(class: "size-6 rounded-full bg-primary/10 flex items-center justify-center") do
+            span(
+              class: "text-xs font-bold text-primary tabular-nums",
               data: {
-                action: "click->#{@controller_name}#clearSelection"
+                "#{@controller_name}-target": "selectedCount"
               }
-            ) { "Clear" }
+            ) { "0" }
           end
         end
 
+        def render_selection_buttons
+          button(
+            type: "button",
+            class: "text-xs font-medium text-muted-foreground hover:text-foreground transition-colors",
+            data: {
+              "#{@controller_name}-target": "selectAllButton",
+              action: "click->#{@controller_name}#selectAll"
+            }
+          ) { "Select all" }
+
+          button(
+            type: "button",
+            class: "text-xs font-medium text-muted-foreground hover:text-foreground transition-colors",
+            data: {
+              action: "click->#{@controller_name}#clearSelection"
+            }
+          ) { "Clear" }
+        end
+
         def render_action_buttons
           div(class: "flex items-center gap-2") do
             @bulk_action_buttons.each do |button_config|

data/app/helpers/ruby_cms/content_blocks_helper.rb

@@ -114,14 +114,14 @@ module RubyCms
     def build_css_class(options)
       user_class = options.delete(:class)
       return user_class.to_s if user_class.present? && !visual_editor_preview_edit_mode?
-      return user_class.to_s if !visual_editor_preview_edit_mode?
+      return user_class.to_s unless visual_editor_preview_edit_mode?
 
       ["ruby_cms-content-block", "content-block", user_class].compact.join(" ")
     end
 
     def build_data_attributes(key, options)
       user_data = options.delete(:data).to_h
-      return user_data if !visual_editor_preview_edit_mode?
+      return user_data unless visual_editor_preview_edit_mode?
 
       { content_key: key, block_id: key.to_s }.merge(user_data)
     end
@@ -133,7 +133,11 @@ module RubyCms
       return false unless controller.respond_to?(:action_name) && controller.action_name.to_s == "page_preview"
 
       begin
-        defined?(@edit_mode) ? (@edit_mode ? true : false) : true
+        if controller.instance_variable_defined?(:@edit_mode)
+          controller.instance_variable_get(:@edit_mode) ? true : false
+        else
+          true
+        end
       rescue StandardError
         true
       end

data/app/helpers/ruby_cms/settings_helper.rb

@@ -40,7 +40,7 @@ module RubyCms
       return nil unless key_str.start_with?("nav_show_")
 
       nav_key = key_str.delete_prefix("nav_show_")
-      item = RubyCms.nav_registry.find { |e| e[:key].to_s == nav_key }
+      item = RubyCms.nav_registry.find {|e| e[:key].to_s == nav_key }
       item&.dig(:icon)
     end
 
@@ -85,31 +85,33 @@ module RubyCms
 
     def render_boolean_setting_field(entry:, value:, tab:)
       checked = ActiveModel::Type::Boolean.new.cast(value)
+      input_id = setting_input_id(entry)
+
       hidden = hidden_field_tag("preferences[#{entry.key}]", "false")
       checkbox = check_box_tag(
         "preferences[#{entry.key}]",
         "true",
         checked,
-        id: setting_input_id(entry),
+        id: input_id,
         class: "peer sr-only",
         data: autosave_data(entry.key, tab)
       )
-      label = content_tag(
-        :label,
-        "",
-        for: setting_input_id(entry),
-        class: "relative inline-flex h-7 w-12 cursor-pointer items-center rounded-full " \
-               "border border-border bg-muted transition-colors peer-checked:bg-primary peer-checked:border-primary"
-      ) do
-        content_tag(
-          :span,
-          "",
-          class: "inline-block h-5 w-5 transform rounded-full bg-background shadow-sm ring-1 ring-border transition " \
-                 "translate-x-1 peer-checked:translate-x-6"
-        )
-      end
 
-      content_tag(:div, class: "inline-flex items-center shrink-0") { hidden + checkbox + label }
+      track = content_tag(:label, "", for: input_id,
+                                      class: "relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full " \
+                                             "border-2 border-transparent bg-input transition-colors " \
+                                             "peer-checked:bg-primary " \
+                                             "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring " \
+                                             "peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background")
+
+      thumb = content_tag(:span, "",
+                          class: "pointer-events-none absolute left-[3px] top-1/2 -translate-y-1/2 h-5 w-5 rounded-full " \
+                                 "bg-background shadow-lg ring-0 transition-transform " \
+                                 "translate-x-0 peer-checked:translate-x-5")
+
+      content_tag(:div, class: "relative inline-flex items-center shrink-0") do
+        safe_join([hidden, checkbox, track, thumb])
+      end
     end
 
     def render_json_setting_field(entry:, value:, tab:)

data/app/models/ruby_cms/permission.rb

@@ -46,7 +46,7 @@ module RubyCms
       end
 
       def matching_templates(user)
-        user_keys = RubyCms::UserPermission.where(user: user)
+        user_keys = RubyCms::UserPermission.where(user:)
                                            .joins(:permission)
                                            .pluck("permissions.key")
         templates.select {|_, tmpl| (tmpl[:keys] - user_keys).empty? }

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/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 %>