ruby_cms 0.2.0.5 → 0.2.0.8

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

@@ -14,6 +14,14 @@ module RubyCms
       DEFAULT_RECENT_PAGE_VIEWS_LIMIT = 25
       DEFAULT_PAGE_DETAILS_LIMIT = 100
       DEFAULT_VISITOR_DETAILS_LIMIT = 100
+      DEFAULT_MAX_EXIT_PAGES = 10
+      DEFAULT_MAX_CONVERSIONS = 10
+
+      # Supported Ahoy event names. Use these constants when calling ahoy.track in the host app.
+      #   page_view:  tracked automatically via RubyCms::PageTracking (page_name:, request_path:)
+      #   conversion: tracked by the host app, e.g. ahoy.track "conversion", goal: "contact_form"
+      EVENT_PAGE_VIEW = "page_view"
+      EVENT_CONVERSION = "conversion"
 
       def initialize(start_date:, end_date:, period: nil)
         @start_date = start_date.to_date.beginning_of_day
@@ -84,7 +92,12 @@ module RubyCms
       end
 
       def page_view_events
-        base = Ahoy::Event.where(name: "page_view", time: @range).joins(:visit).merge(visits)
+        base = Ahoy::Event.where(name: EVENT_PAGE_VIEW, time: @range).joins(:visit).merge(visits)
+        apply_event_scope_hook(base)
+      end
+
+      def conversion_events
+        base = Ahoy::Event.where(name: EVENT_CONVERSION, time: @range).joins(:visit).merge(visits)
         apply_event_scope_hook(base)
       end
 
@@ -298,6 +311,102 @@ module RubyCms
         end
       end
 
+      def parse_event_properties(props)
+        return props if props.kind_of?(Hash)
+
+        JSON.parse(props.to_s)
+      rescue StandardError
+        {}
+      end
+
+      def conversion_stats_data
+        limit = RubyCms::Settings.get(:analytics_max_conversions, default: DEFAULT_MAX_CONVERSIONS).to_i
+        total = conversion_events.count
+        grouped = conversion_events.pluck(:properties).each_with_object(Hash.new(0)) do |props, acc|
+          parsed = parse_event_properties(props)
+          goal = parsed["goal"].presence || "unknown"
+          acc[goal] += 1
+        end
+        by_goal = grouped.sort_by {|_, count| -count }.first(limit).to_h
+        { total:, by_goal: }
+      rescue StandardError
+        { total: 0, by_goal: {} }
+      end
+
+      def exit_pages_data
+        limit = RubyCms::Settings.get(:analytics_max_exit_pages, default: DEFAULT_MAX_EXIT_PAGES).to_i
+
+        # Single DB query: subquery finds the latest event time per visit, outer query
+        # counts how often each page_name appears as the last page of a session.
+        last_times_sql = page_view_events
+                         .select(:visit_id, Arel.sql("MAX(ahoy_events.time) AS max_time"))
+                         .group(:visit_id)
+                         .to_sql
+
+        Ahoy::Event
+          .joins("INNER JOIN (#{last_times_sql}) last_pv
+                    ON ahoy_events.visit_id = last_pv.visit_id
+                   AND ahoy_events.time     = last_pv.max_time")
+          .where(name: EVENT_PAGE_VIEW, time: @range)
+          .where.not(page_name: [nil, ""])
+          .group(:page_name)
+          .order(Arel.sql("COUNT(*) DESC"))
+          .limit(limit)
+          .count
+      rescue StandardError
+        {}
+      end
+
+      def previous_period_start
+        @previous_period_start ||= @start_date - days_in_range.days
+      end
+
+      def previous_period_end
+        @previous_period_end ||= @start_date - 1.second
+      end
+
+      def previous_visits
+        base = Ahoy::Visit.where(started_at: previous_period_start..previous_period_end)
+        apply_visit_scope_hook(base)
+      end
+
+      def previous_page_view_events
+        base = Ahoy::Event
+               .where(name: EVENT_PAGE_VIEW, time: previous_period_start..previous_period_end)
+               .joins(:visit)
+               .merge(previous_visits)
+        apply_event_scope_hook(base)
+      end
+
+      def previous_period_totals
+        {
+          total_page_views: previous_page_view_events.count,
+          unique_visitors: previous_visits.distinct.count(:visitor_token),
+          total_sessions: previous_visits.distinct.count(:visit_token)
+        }
+      rescue StandardError
+        {}
+      end
+
+      def compute_delta(current, previous)
+        return nil if previous.to_i.zero?
+
+        ((current.to_f - previous.to_f) / previous.to_f * 100).round(1)
+      end
+
+      def compute_period_deltas(current_views, current_visitors, current_sessions)
+        prev = previous_period_totals
+        return {} if prev.empty?
+
+        {
+          total_page_views: compute_delta(current_views, prev[:total_page_views]),
+          unique_visitors: compute_delta(current_visitors, prev[:unique_visitors]),
+          total_sessions: compute_delta(current_sessions, prev[:total_sessions])
+        }
+      rescue StandardError
+        {}
+      end
+
       def fill_date_gaps(data)
         (@start_date.to_date..@end_date.to_date).each_with_object({}) do |date, acc|
           key = date.strftime("%Y-%m-%d")
@@ -336,12 +445,12 @@ module RubyCms
         total = visits.distinct.count(:visitor_token)
         return 0 unless total.positive?
 
-        returning_tokens = Ahoy::Visit
-                           .where(started_at: ...@start_date)
-                           .distinct
-                           .pluck(:visitor_token)
+        # Subquery keeps everything in the DB; avoids loading all historical tokens into Ruby.
+        returning_subquery = Ahoy::Visit
+                             .where(started_at: ...@start_date)
+                             .select(:visitor_token)
 
-        new_count = visits.where.not(visitor_token: returning_tokens).distinct.count(:visitor_token)
+        new_count = visits.where.not(visitor_token: returning_subquery).distinct.count(:visitor_token)
         ((new_count.to_f / total) * 100).round(0).to_i
       rescue StandardError
         0
@@ -392,7 +501,10 @@ module RubyCms
           os_stats: visits.where.not(os: [nil, ""]).group(:os).count,
           suspicious_activity: suspicious_activity_data,
           recent_page_views: page_view_events.order(time: :desc).limit(recent_page_views_limit),
-          extra_cards: extra_cards_data
+          extra_cards: extra_cards_data,
+          conversions: conversion_stats_data,
+          exit_pages: exit_pages_data,
+          period_deltas: compute_period_deltas(total_views, unique_visitors, total_sessions)
         }
       end
     end

data/app/services/ruby_cms/command_runner.rb

@@ -10,10 +10,10 @@ module RubyCms
         raise ArgumentError, "rake task blank" if task.to_s.strip.blank?
 
         env = { "RAILS_ENV" => Rails.env.to_s }
-        argv = [ "bundle", "exec", "rake", task.to_s ]
+        argv = ["bundle", "exec", "rake", task.to_s]
         stdout_and_stderr, status = Open3.capture2e(env, *argv, chdir: Rails.root.to_s)
         <<~TEXT.strip
-          $ #{argv.join(" ")}
+          $ #{argv.join(' ')}
           (exit #{status.exitstatus})
 
           #{stdout_and_stderr}
@@ -30,7 +30,7 @@ module RubyCms
 
         File.open(path, "rb") do |f|
           size = f.size
-          f.seek([ 0, size - max_bytes ].max)
+          f.seek([0, size - max_bytes].max)
           chunk = f.read
           chunk.lines.last(lines.to_i.clamp(1, 10_000)).join
         end

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

@@ -3,7 +3,8 @@
   subtitle: t("ruby_cms.admin.analytics.subtitle", default: "Traffic and engagement overview"),
   content_card: false
 ) do %>
-  <div class="space-y-4">
+  <div class="space-y-6">
+
     <%# ── 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">
@@ -17,7 +18,7 @@
           <% 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-colors #{active ? 'bg-primary text-primary-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}" %>
+                      class: "px-4 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>
 
@@ -36,99 +37,190 @@
       <% end %>
     </div>
 
-    <%# ── 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>
+    <%# ── Activity charts (3/4) + KPI summary card (1/4) ── %>
+    <div class="grid gap-4 items-start" style="grid-template-columns: 3fr 1fr;">
 
-      <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>
+      <%# Left: activity charts stacked %>
+      <div class="space-y-4 min-w-0">
+        <%= render "ruby_cms/admin/analytics/partials/daily_activity_chart" %>
+        <%= render "ruby_cms/admin/analytics/partials/hourly_activity_chart" %>
       </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.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>
+      <%# Right: single KPI summary card %>
+      <div class="rounded-xl border border-border/60 bg-white shadow-sm overflow-hidden">
+        <div class="px-4 py-3 border-b border-border/60">
+          <p class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Overview</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-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>
+        <%# Active users now %>
+        <div class="px-4 py-3 bg-emerald-50/60 border-b border-emerald-100">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-xs font-medium text-emerald-700">Nu actief</p>
+              <div class="flex items-baseline gap-1.5 mt-0.5">
+                <p class="text-2xl font-bold tracking-tight text-emerald-800 tabular-nums"><%= @active_users || 0 %></p>
+                <span class="text-xs text-emerald-600">gebruikers</span>
+              </div>
+              <p class="text-xs text-emerald-600/70 mt-0.5">Afgelopen 5 minuten</p>
+            </div>
+            <div class="flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-1">
+              <span class="relative flex h-2 w-2">
+                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-500 opacity-75"></span>
+                <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-600"></span>
+              </span>
+              <span class="text-xs font-medium text-emerald-700">Live</span>
+            </div>
+          </div>
         </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 class="divide-y divide-border/50">
+
+          <%# Page Views %>
+          <div class="px-4 py-3">
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-xs font-medium text-muted-foreground"><%= t("ruby_cms.admin.analytics.total_page_views", default: "Page Views") %></span>
+              <div class="rounded-md bg-blue-50 p-1 flex-shrink-0">
+                <svg class="w-3.5 h-3.5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
+              </div>
+            </div>
+            <div class="flex items-baseline gap-2">
+              <p class="text-xl font-bold tracking-tight text-foreground tabular-nums"><%= number_with_delimiter(@total_page_views) %></p>
+              <% if (delta = @period_deltas&.dig(:total_page_views)) %>
+                <span class="inline-flex items-center text-xs font-semibold rounded-full px-1.5 py-0.5 <%= delta >= 0 ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-700' %>">
+                  <%= delta >= 0 ? "↑" : "↓" %> <%= delta.abs %>%
+                </span>
+              <% end %>
+            </div>
+            <p class="mt-0.5 text-xs text-muted-foreground">~<%= number_with_delimiter(@avg_daily_views) %> per day</p>
+          </div>
+
+          <%# Unique Visitors %>
+          <div class="px-4 py-3">
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-xs font-medium text-muted-foreground"><%= t("ruby_cms.admin.analytics.unique_visitors", default: "Unique Visitors") %></span>
+              <div class="rounded-md bg-violet-50 p-1 flex-shrink-0">
+                <svg class="w-3.5 h-3.5 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+              </div>
+            </div>
+            <div class="flex items-baseline gap-2">
+              <p class="text-xl font-bold tracking-tight text-foreground tabular-nums"><%= number_with_delimiter(@unique_visitors) %></p>
+              <% if (delta = @period_deltas&.dig(:unique_visitors)) %>
+                <span class="inline-flex items-center text-xs font-semibold rounded-full px-1.5 py-0.5 <%= delta >= 0 ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-700' %>">
+                  <%= delta >= 0 ? "↑" : "↓" %> <%= delta.abs %>%
+                </span>
+              <% elsif @new_visitor_percentage.to_i > 0 %>
+                <span class="inline-flex items-center text-xs font-semibold rounded-full px-1.5 py-0.5 bg-emerald-50 text-emerald-700">
+                  <%= @new_visitor_percentage %>% new
+                </span>
+              <% end %>
+            </div>
+            <p class="mt-0.5 text-xs text-muted-foreground">Distinct visitor tokens</p>
+          </div>
+
+          <%# Sessions %>
+          <div class="px-4 py-3">
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-xs font-medium text-muted-foreground"><%= t("ruby_cms.admin.analytics.total_sessions", default: "Sessions") %></span>
+              <div class="rounded-md bg-emerald-50 p-1 flex-shrink-0">
+                <svg class="w-3.5 h-3.5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
+              </div>
+            </div>
+            <div class="flex items-baseline gap-2">
+              <p class="text-xl font-bold tracking-tight text-foreground tabular-nums"><%= number_with_delimiter(@total_sessions) %></p>
+              <% if (delta = @period_deltas&.dig(:total_sessions)) %>
+                <span class="inline-flex items-center text-xs font-semibold rounded-full px-1.5 py-0.5 <%= delta >= 0 ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-700' %>">
+                  <%= delta >= 0 ? "↑" : "↓" %> <%= delta.abs %>%
+                </span>
+              <% end %>
+            </div>
+            <p class="mt-0.5 text-xs text-muted-foreground"><%= @pages_per_session %> pages per session</p>
+          </div>
+
+          <%# Bounce Rate %>
+          <div class="px-4 py-3">
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-xs font-medium text-muted-foreground"><%= t("ruby_cms.admin.analytics.bounce_rate", default: "Bounce Rate") %></span>
+              <div class="rounded-md p-1 flex-shrink-0 <%= @bounce_rate.to_f > 70 ? 'bg-red-50' : @bounce_rate.to_f > 50 ? 'bg-amber-50' : 'bg-emerald-50' %>">
+                <svg class="w-3.5 h-3.5 <%= @bounce_rate.to_f > 70 ? 'text-red-600' : @bounce_rate.to_f > 50 ? 'text-amber-600' : 'text-emerald-600' %>" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
+              </div>
+            </div>
+            <div class="flex items-baseline gap-2">
+              <p class="text-xl font-bold tracking-tight text-foreground tabular-nums"><%= @bounce_rate %>%</p>
+              <span class="inline-flex items-center text-xs font-semibold rounded-full px-1.5 py-0.5 <%= @bounce_rate.to_f > 70 ? 'bg-red-50 text-red-700' : @bounce_rate.to_f > 50 ? 'bg-amber-50 text-amber-700' : 'bg-emerald-50 text-emerald-700' %>">
+                <%= @bounce_rate.to_f > 70 ? "High" : @bounce_rate.to_f > 50 ? "Average" : "Good" %>
+              </span>
+            </div>
+            <p class="mt-0.5 text-xs text-muted-foreground">Single-page sessions</p>
+          </div>
+
         </div>
-        <p class="mt-0.5 text-[10px] text-muted-foreground">Single-page sessions</p>
       </div>
+
     </div>
 
-    <%# ── 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" %>
+    <%# ── Section: Content ── %>
+    <div class="flex items-center gap-3">
+      <span class="text-xs font-semibold uppercase tracking-wider text-muted-foreground whitespace-nowrap">Content</span>
+      <div class="flex-1 h-px bg-border/50"></div>
     </div>
 
-    <%# ── Content: pages + visitors ── %>
-    <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
       <div class="lg:col-span-2">
         <%= render "ruby_cms/admin/analytics/partials/popular_pages" %>
       </div>
       <%= render "ruby_cms/admin/analytics/partials/top_visitors" %>
     </div>
 
-    <%# ── Sources & tech ── %>
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+    <%# ── Section: Traffic Sources ── %>
+    <div class="flex items-center gap-3">
+      <span class="text-xs font-semibold uppercase tracking-wider text-muted-foreground whitespace-nowrap">Traffic Sources</span>
+      <div class="flex-1 h-px bg-border/50"></div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       <%= 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>
 
-    <%# ── Tech & activity ── %>
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+    <%# ── Section: Audience & Technology ── %>
+    <div class="flex items-center gap-3">
+      <span class="text-xs font-semibold uppercase tracking-wider text-muted-foreground whitespace-nowrap">Audience & Technology</span>
+      <div class="flex-1 h-px bg-border/50"></div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       <%= 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>
 
+    <%# ── Section: Behavior ── %>
+    <div class="flex items-center gap-3">
+      <span class="text-xs font-semibold uppercase tracking-wider text-muted-foreground whitespace-nowrap">Behavior</span>
+      <div class="flex-1 h-px bg-border/50"></div>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+      <%= render "ruby_cms/admin/analytics/partials/exit_pages" %>
+      <%= render "ruby_cms/admin/analytics/partials/conversions" %>
+    </div>
+
     <%# ── 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 class="rounded-xl border border-amber-200 bg-amber-50/60 shadow-sm overflow-hidden">
+        <div class="px-4 py-3 border-b border-amber-200/60 flex items-center gap-3">
+          <div class="rounded-md bg-amber-100 p-1.5 flex-shrink-0">
+            <svg class="w-4 h-4 text-amber-700" 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"/></svg>
+          </div>
+          <div>
+            <p class="text-sm font-semibold text-amber-900"><%= t("ruby_cms.admin.analytics.suspicious_activity", default: "Suspicious activity") %></p>
+            <p class="text-xs text-amber-700/80">Potential bot-like traffic signals</p>
+          </div>
         </div>
-        <div class="px-3 py-2 divide-y divide-amber-200/40">
+        <div class="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">
+            <div class="flex items-center justify-between gap-3 px-4 py-2.5">
               <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>
@@ -139,17 +231,18 @@
 
     <%# ── Extra cards hook ── %>
     <% if Array(@extra_cards).any? %>
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         <% @extra_cards.each do |card| %>
-          <div class="rounded-lg border border-border/60 bg-white p-3 shadow-sm">
+          <div class="rounded-xl border border-border/60 bg-white p-4 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>
+            <p class="mt-2 text-2xl font-bold 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>
+              <p class="mt-1.5 text-xs text-muted-foreground"><%= card[:description] %></p>
             <% end %>
           </div>
         <% end %>
       </div>
     <% end %>
+
   </div>
 <% end %>

data/app/views/ruby_cms/admin/analytics/partials/_browser_device.html.erb

@@ -1,13 +1,18 @@
-<div class="rounded-lg border border-border/60 bg-white shadow-sm">
-  <div class="px-4 py-3 border-b border-border/40">
-    <p class="text-sm font-semibold text-foreground"><%= t("ruby_cms.admin.analytics.browsers_devices", default: "Browsers & Devices") %></p>
-    <p class="text-sm text-muted-foreground">Environment breakdown.</p>
+<div class="rounded-xl border border-border/60 bg-white shadow-sm overflow-hidden">
+  <div class="flex items-center gap-3 px-4 py-3 border-b border-border/40">
+    <div class="rounded-md bg-slate-100 p-1.5 flex-shrink-0">
+      <svg class="w-4 h-4 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
+    </div>
+    <div>
+      <p class="text-sm font-semibold text-foreground"><%= t("ruby_cms.admin.analytics.browsers_devices", default: "Browsers & Devices") %></p>
+      <p class="text-xs text-muted-foreground">Environment breakdown</p>
+    </div>
   </div>
 
-  <div class="px-4 py-3 space-y-3">
+  <div class="px-4 py-3 space-y-4">
     <% if @browser_stats.present? && @browser_stats.any? %>
       <div>
-        <p class="text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2">Browsers</p>
+        <p class="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2.5">Browsers</p>
         <% total = @browser_stats.values.sum.to_f %>
         <div class="space-y-2.5">
           <% @browser_stats.sort_by { |_, v| -v }.first(4).each do |browser, count| %>
@@ -20,8 +25,8 @@
                   <span class="text-sm font-semibold tabular-nums text-foreground"><%= number_with_delimiter(count) %></span>
                 </div>
               </div>
-              <div class="w-full h-1 bg-muted rounded-full overflow-hidden">
-                <div class="h-full bg-primary/60 rounded-full" style="width: <%= pct %>%"></div>
+              <div class="w-full h-1.5 bg-muted rounded-full overflow-hidden">
+                <div class="h-full bg-slate-400 rounded-full" style="width: <%= pct %>%"></div>
               </div>
             </div>
           <% end %>
@@ -31,14 +36,14 @@
 
     <% if @device_stats.present? && @device_stats.any? %>
       <div>
-        <p class="text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2">Devices</p>
+        <p class="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2.5">Devices</p>
         <% total = @device_stats.values.sum.to_f %>
-        <div class="flex gap-3">
-          <% @device_stats.sort_by { |_, v| -v }.first(4).each do |device, count| %>
+        <div class="grid grid-cols-3 gap-2">
+          <% @device_stats.sort_by { |_, v| -v }.first(3).each do |device, count| %>
             <% pct = total.positive? ? (count / total * 100).round(0) : 0 %>
-          <div class="flex-1 rounded-lg border border-border/40 bg-muted/30 p-2.5 text-center">
-              <p class="text-lg font-semibold text-foreground tabular-nums"><%= pct %>%</p>
-              <p class="text-xs text-muted-foreground mt-0.5"><%= device %></p>
+            <div class="rounded-lg border border-border/40 bg-muted/30 p-2.5 text-center">
+              <p class="text-lg font-bold text-foreground tabular-nums"><%= pct %>%</p>
+              <p class="text-xs text-muted-foreground mt-0.5 truncate"><%= device %></p>
             </div>
           <% end %>
         </div>
@@ -46,7 +51,8 @@
     <% end %>
 
     <% if (@browser_stats.blank? || @browser_stats.empty?) && (@device_stats.blank? || @device_stats.empty?) %>
-      <div class="py-6 text-center">
+      <div class="flex flex-col items-center justify-center py-6 gap-2">
+        <svg class="w-8 h-8 text-muted-foreground/30" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
         <p class="text-sm text-muted-foreground"><%= t("ruby_cms.admin.analytics.no_data", default: "No data yet.") %></p>
       </div>
     <% end %>