ruby_cms 0.1.0

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

@@ -0,0 +1,37 @@
+<%# Flash messages with auto-dismiss %>
+<% if flash.any? %>
+  <div class="mb-4 space-y-2" data-controller="ruby-cms--flash-messages">
+    <% flash.each do |type, message| %>
+      <%
+        variant =
+          case type.to_s
+          when "notice"
+            "border-emerald-200 bg-emerald-50 text-emerald-900"
+          when "alert", "error"
+            "border-rose-200 bg-rose-50 text-rose-900"
+          else
+            "border-gray-200 bg-white text-gray-900"
+          end
+      %>
+      <div class="flash-message px-4 py-3 rounded-lg border flex items-center justify-between shadow-sm transition duration-200 ease-in-out transform <%= variant %>" role="alert" data-ruby-cms--flash-messages-target="message">
+        <div class="flex items-center">
+          <% if type == "notice" %>
+            <svg class="w-5 h-5 text-green-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+            </svg>
+          <% elsif type == "alert" %>
+            <svg class="w-5 h-5 text-amber-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
+            </svg>
+          <% end %>
+          <span><%= message %></span>
+        </div>
+        <button type="button" class="ml-4 text-gray-500 hover:text-gray-900" aria-label="Dismiss" data-action="click->ruby-cms--flash-messages#dismiss">
+          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+          </svg>
+        </button>
+      </div>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,121 @@
+<%# Admin Sidebar Navigation %>
+<aside class="w-56 flex-shrink-0 bg-[#FAF9F5] flex flex-col overflow-hidden" aria-label="Admin" data-ruby-cms--mobile-menu-target="sidebar">
+  <div class="px-5 py-5 flex-shrink-0 bg-[#FAF9F5]">
+    <div class="flex items-center gap-3" data-ruby-cms--mobile-menu-target="sidebarContent">
+      <% if respond_to?(:image_tag, true) %>
+        <div class="w-7 h-7 flex-shrink-0 rounded-sm bg-gray-900 flex items-center justify-center text-white font-bold text-sm">
+          <% if respond_to?(:main_app, true) && main_app.respond_to?(:image_path) %>
+            <%= image_tag main_app.image_path("logo.png"), alt: "Logo", onerror: "this.style.display='none'", class: "w-full h-full object-contain" rescue nil %>
+          <% end %>
+        </div>
+      <% end %>
+      <p class="text-base font-semibold text-gray-900 m-0">RubyCMS</p>
+    </div>
+  </div>
+
+  <nav class="flex-1 px-3 py-6 overflow-y-auto" aria-label="Admin" data-ruby-cms--mobile-menu-target="sidebarContent">
+    <%
+      nav_main = "main"
+      nav_bottom = "Settings"
+      entries = ruby_cms_nav_entries
+      by_section = entries.group_by { |e| s = e[:section].to_s.presence || nav_main; s == "custom" ? nav_bottom : s }
+      main_items = by_section[nav_main] || []
+      bottom_items = by_section[nav_bottom] || []
+    %>
+    <%# Main nav: top, scrollable %>
+    <div class="flex-1 overflow-y-auto space-y-1 min-h-0">
+      <% main_items.each do |e| %>
+        <% begin %>
+          <% path = e[:path].respond_to?(:call) ? e[:path].call(self) : e[:path] %>
+          <% next if path.blank? %>
+          <% path_str = path.respond_to?(:to_str) ? path.to_str : path.to_s %>
+          <% active = (path_str == "/admin" || path_str == "/admin/") ? request.path.match?(%r{\A/admin/?\z}) : request.path.start_with?(path_str) %>
+          <%= link_to path, class: "flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-md mb-0.5 no-underline transition-colors #{ active ? 'text-blue-600 font-semibold' : 'text-gray-600 hover:bg-blue-500 hover:text-white' }" do %>
+            <% if e[:icon].present? %>
+              <svg class="w-5 h-5 flex-shrink-0 text-current" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <%= ruby_cms_safe_svg_fragment(e[:icon]) %>
+              </svg>
+            <% end %>
+            <span class="flex-1"><%= e[:label] %></span>
+          <% end %>
+        <% rescue => ex %>
+          <% Rails.logger.error "RubyCMS nav error for #{e[:key]}: #{ex.message}" if defined?(Rails.logger) %>
+        <% end %>
+      <% end %>
+    </div>
+
+    <%# Spacer so bottom section sits above footer %>
+    <div class="flex-shrink-0 pt-4 mt-4">
+      <% if bottom_items.any? %>
+        <div class="text-xs font-semibold uppercase tracking-wider text-gray-500 px-2 pb-2">
+          <%= t("ruby_cms.nav.settings", default: "Settings") %>
+        </div>
+        <div class="space-y-1">
+          <% bottom_items.each do |e| %>
+            <% begin %>
+              <% path = e[:path].respond_to?(:call) ? e[:path].call(self) : e[:path] %>
+              <% next if path.blank? %>
+              <% path_str = path.respond_to?(:to_str) ? path.to_str : path.to_s %>
+              <% active = request.path.start_with?(path_str) %>
+              <%= link_to path, class: "flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-md mb-0.5 no-underline transition-colors #{ active ? 'text-blue-600 font-semibold' : 'text-gray-600 hover:bg-blue-500 hover:text-white' }" do %>
+                <% if e[:icon].present? %>
+                  <svg class="w-5 h-5 flex-shrink-0 text-current" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <%= ruby_cms_safe_svg_fragment(e[:icon]) %>
+                  </svg>
+                <% end %>
+                <span class="flex-1"><%= e[:label] %></span>
+              <% end %>
+            <% rescue => ex %>
+              <% Rails.logger.error "RubyCMS nav error for #{e[:key]}: #{ex.message}" if defined?(Rails.logger) %>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </nav>
+
+  <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| %>
+        <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">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21a9 9 0 100-18 9 9 0 000 18zM3.6 9h16.8M3.6 15h16.8M11 3c-2.2 2.2-3.5 5.2-3.5 9s1.3 6.8 3.5 9m2 0c2.2-2.2 3.5-5.2 3.5-9S15.2 5.2 13 3"/>
+            </svg>
+            <span class="flex-1 text-left"><%= ruby_cms_locale_display_name(I18n.locale) %></span>
+            <svg class="w-4 h-4 flex-shrink-0 opacity-80" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10l4-4 4 4M16 14l-4 4-4-4"/>
+            </svg>
+          </div>
+
+          <%= form.select :locale,
+              options_for_select(I18n.available_locales.map { |loc| [ruby_cms_locale_display_name(loc), loc.to_s] }, I18n.locale.to_s),
+              {},
+              {
+                class: "absolute inset-0 w-full h-full opacity-0 cursor-pointer",
+                aria: { label: "Locale" },
+                onchange: "this.form.requestSubmit()"
+              } %>
+        </div>
+      <% end %>
+    </div>
+
+    <% if respond_to?(:main_app, true) && main_app.respond_to?(:root_path) %>
+      <%= link_to main_app.root_path, target: "_blank", 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" do %>
+        <svg class="w-5 h-5 flex-shrink-0" 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"></path>
+        </svg>
+        <span class="flex-1 text-left">View site</span>
+      <% end %>
+    <% end %>
+
+    <% if respond_to?(:main_app, true) && main_app.respond_to?(:session_path) %>
+      <%= button_to main_app.session_path, method: :delete, class: "flex items-center gap-3 w-full px-3 py-2.5 text-sm font-medium text-gray-600 rounded-md bg-transparent border-0 cursor-pointer transition-colors hover:bg-blue-500 hover:text-white", data: { turbo_confirm: "Are you sure you want to logout?" } do %>
+        <svg class="w-5 h-5 flex-shrink-0" 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"></path>
+        </svg>
+        <span class="flex-1 text-left">Logout</span>
+      <% end %>
+    <% end %>
+  </div>
+</aside>

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

@@ -0,0 +1,81 @@
+<%# Single admin layout for app and RubyCMS. Uses RubyCMS sidebar, flash, content_for. %>
+<!DOCTYPE html>
+<html lang="<%= I18n.locale %>">
+  <head>
+    <title><%= content_for(:title) || "RubyCMS Admin" %></title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="rails-env" content="<%= Rails.env %>">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <%= favicon_link_tag asset_path("favicon.ico") if respond_to?(:favicon_link_tag, true) %>
+    <link rel="icon" type="image/png" sizes="32x32" href="<%= asset_path("favicon-32x32.png") %>">
+    <link rel="icon" type="image/png" sizes="16x16" href="<%= asset_path("favicon-16x16.png") %>">
+    <link rel="apple-touch-icon" href="<%= asset_path("apple-touch-icon.png") %>">
+    <link rel="manifest" href="<%= asset_path("site.webmanifest") %>">
+
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "actiontext", "data-turbo-track": "reload" if asset_path("actiontext.css") rescue nil %>
+    <%= javascript_importmap_tags "admin" %>
+  </head>
+  <body class="min-h-screen bg-gray-50 text-gray-900">
+    <div class="flex h-screen overflow-hidden" data-controller="ruby-cms--mobile-menu">
+      <%# Mobile menu toggle (visible on md and below) %>
+      <button type="button" class="md:hidden fixed top-4 left-4 z-50 inline-flex items-center justify-center p-2 bg-white border border-gray-200/80 rounded-lg shadow-sm cursor-pointer" aria-label="Toggle menu" data-action="click->ruby-cms--mobile-menu#toggle">
+        <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="M4 6h16M4 12h16M4 18h16"></path>
+        </svg>
+      </button>
+
+      <%= render "layouts/ruby_cms/admin_sidebar" %>
+
+      <%# Mobile overlay (JS adds class "show") %>
+      <div class="hidden fixed inset-0 bg-black/50 z-40 lg:hidden" data-ruby-cms--mobile-menu-target="overlay" data-action="click->ruby-cms--mobile-menu#close"></div>
+
+      <main class="bg-gray-50 flex-1 flex flex-col overflow-hidden min-w-0" role="main">
+        <% if content_for?(:full_width) %>
+          <%= yield %>
+        <% 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">
+            <% if content_for?(:title) || content_for?(:header_actions) %>
+              <header class="flex-shrink-0 mb-4 <%= yield(:header_styles) if content_for?(:header_styles) %>">
+                <div class="flex flex-wrap items-center justify-between gap-4">
+                  <div>
+                    <% 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>
+                    <% end %>
+                  </div>
+                  <% if content_for?(:header_actions) %>
+                    <div class="flex items-center 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" %>
+
+            <%= yield %>
+            </div>
+          </div>
+        <% end %>
+      </main>
+    </div>
+  </body>
+</html>

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

@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="<%= I18n.locale %>">
+  <head>
+    <title><%= content_for(:title) || "Page Preview" %></title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="rails-env" content="<%= Rails.env %>">
+    <meta name="locale" content="<%= I18n.locale %>">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%# Conditionally include tailwind stylesheet if it exists (works with both Sprockets and Propshaft) %>
+    <% tailwind_exists = begin
+      if Rails.application.assets.respond_to?(:find_asset)
+        # Sprockets
+        Rails.application.assets.find_asset("tailwind")
+      else
+        # Propshaft or other - assume it exists, Rails will handle missing assets gracefully
+        true
+      end
+    rescue
+      false
+    end %>
+    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" if tailwind_exists %>
+    <%= javascript_importmap_tags if respond_to?(:javascript_importmap_tags) %>
+    
+    <style>
+      /* Content block interaction styles */
+      .ruby_cms-preview-page {
+        position: relative;
+      }
+      
+      .ruby_cms-preview-page--edit-mode .ruby_cms-content-block {
+        cursor: pointer;
+        transition: all 0.2s ease;
+        position: relative;
+        display: inline-block;
+        min-height: 1em;
+        min-width: 1em;
+      }
+      
+      .ruby_cms-preview-page--edit-mode .content-block {
+        cursor: pointer;
+        transition: all 0.2s ease;
+        position: relative;
+        display: inline-block;
+        min-height: 1em;
+        min-width: 1em;
+      }
+      
+      .ruby_cms-preview-page--edit-mode .ruby_cms-content-block:hover {
+        outline: 2px dashed rgb(59 130 246);
+        outline-offset: 2px;
+        background-color: rgba(59, 130, 246, 0.05);
+      }
+      
+      .ruby_cms-preview-page--edit-mode .content-block:hover {
+        outline: 2px dashed rgb(59 130 246);
+        outline-offset: 2px;
+        background-color: rgba(59, 130, 246, 0.05);
+      }
+      
+      .ruby_cms-content-block.editing {
+        outline: 2px solid rgb(34 197 94);
+        outline-offset: 2px;
+        background-color: rgba(34, 197, 94, 0.1);
+      }
+      
+      .content-block.editing {
+        outline: 2px solid rgb(34 197 94);
+        outline-offset: 2px;
+        background-color: rgba(34, 197, 94, 0.1);
+      }
+      
+      /* Make block-level content blocks more visible */
+      .ruby_cms-preview-page--edit-mode .ruby_cms-content-block[data-block-id],
+      .ruby_cms-preview-page--edit-mode .ruby_cms-content-block[data-content-key] {
+        display: block;
+        padding: 0.25rem;
+        margin: 0.125rem 0;
+      }
+      
+      .ruby_cms-preview-page--edit-mode .content-block[data-block-id],
+      .ruby_cms-preview-page--edit-mode .content-block[data-content-key] {
+        display: block;
+        padding: 0.25rem;
+        margin: 0.125rem 0;
+      }
+      
+      .ruby_cms-preview-page--edit-mode .ruby_cms-content-block[data-block-id]:hover::before,
+      .ruby_cms-preview-page--edit-mode .ruby_cms-content-block[data-content-key]:hover::before {
+        content: "✎ Edit";
+        position: absolute;
+        top: -1.5rem;
+        left: 0;
+        font-size: 0.75rem;
+        color: rgb(59 130 246);
+        background: white;
+        padding: 0.125rem 0.25rem;
+        border-radius: 0.25rem;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        pointer-events: none;
+        z-index: 10;
+      }
+      
+      .ruby_cms-preview-page--edit-mode .content-block[data-block-id]:hover::before,
+      .ruby_cms-preview-page--edit-mode .content-block[data-content-key]:hover::before {
+        content: "✎ Edit";
+        position: absolute;
+        top: -1.5rem;
+        left: 0;
+        font-size: 0.75rem;
+        color: rgb(59 130 246);
+        background: white;
+        padding: 0.125rem 0.25rem;
+        border-radius: 0.25rem;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        pointer-events: none;
+        z-index: 10;
+      }
+      
+      .ruby_cms-preview-page__edit-indicator {
+        position: fixed;
+        top: 1rem;
+        right: 1rem;
+        z-index: 50;
+      }
+      
+      .ruby_cms-preview-page__edit-badge {
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+        background-color: rgb(220 252 231);
+        border: 1px solid rgb(187 247 208);
+        border-radius: 9999px;
+        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: rgb(22 101 52);
+      }
+      
+      .ruby_cms-preview-page__edit-badge-dot {
+        width: 0.5rem;
+        height: 0.5rem;
+        background-color: rgb(34 197 94);
+        border-radius: 9999px;
+        animation: ruby_cms-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      }
+      
+      @keyframes ruby_cms-pulse {
+        0%, 100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.5;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div 
+      class="ruby_cms-preview-page<%= ' ruby_cms-preview-page--edit-mode' if @edit_mode %>"
+      data-controller="ruby-cms--page-preview"
+      data-ruby-cms--page-preview-edit-mode-value="<%= @edit_mode %>">
+      
+      <% if @edit_mode %>
+        <div class="ruby_cms-preview-page__edit-indicator">
+          <div class="ruby_cms-preview-page__edit-badge">
+            <span class="ruby_cms-preview-page__edit-badge-dot"></span>
+            Edit Mode
+          </div>
+        </div>
+      <% end %>
+      
+      <%= yield %>
+    </div>
+  </body>
+</html>

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

@@ -0,0 +1,160 @@
+<%= AdminPage(
+  title: t("ruby_cms.admin.analytics.title", default: "Analytics"),
+  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">
+        <% [["Day", "day"], ["Week", "week"], ["Month", "month"], ["Year", "year"]].each do |label, value| %>
+          <% start_date = case value
+                         when "day" then Date.current
+                         when "week" then 6.days.ago.to_date
+                         when "month" then 29.days.ago.to_date
+                         else 364.days.ago.to_date
+                         end %>
+          <% 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'}" %>
+        <% 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" %>
+        </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" %>
+        </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" %>
+      <% 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>
+      </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>
+      <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>
+    </div>
+
+    <div class="grid grid-cols-2 gap-4">
+      <%= 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 %>
+      </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>
+
+        <% 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>
+    </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>
+        </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>
+          <% end %>
+        </div>
+      </div>
+
+      <%= 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>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+<% end %>