RubyGems - quarterdeck - Versions diffs - 0.1.0 - Mend

quarterdeck 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

checksums.yaml +7 -0
data/MIT-LICENSE +20 -0
data/README.md +93 -0
data/Rakefile +3 -0
data/app/assets/stylesheets/quarterdeck/application.css +15 -0
data/app/controllers/quarterdeck/application_controller.rb +73 -0
data/app/controllers/quarterdeck/campaigns_controller.rb +52 -0
data/app/controllers/quarterdeck/events_controller.rb +38 -0
data/app/controllers/quarterdeck/geographics_controller.rb +41 -0
data/app/controllers/quarterdeck/live_controller.rb +32 -0
data/app/controllers/quarterdeck/overview_controller.rb +89 -0
data/app/controllers/quarterdeck/visits_controller.rb +46 -0
data/app/helpers/quarterdeck/application_helper.rb +4 -0
data/app/javascript/quarterdeck/application.js +9 -0
data/app/javascript/quarterdeck/controllers/chart_controller.js +99 -0
data/app/javascript/quarterdeck/controllers/date_range_controller.js +18 -0
data/app/javascript/quarterdeck/controllers/live_controller.js +59 -0
data/app/jobs/quarterdeck/application_job.rb +4 -0
data/app/mailers/quarterdeck/application_mailer.rb +6 -0
data/app/models/quarterdeck/application_record.rb +5 -0
data/app/views/layouts/quarterdeck/application.html.erb +36 -0
data/app/views/quarterdeck/campaigns/show.html.erb +35 -0
data/app/views/quarterdeck/events/index.html.erb +89 -0
data/app/views/quarterdeck/geographics/show.html.erb +32 -0
data/app/views/quarterdeck/live/show.html.erb +75 -0
data/app/views/quarterdeck/overview/show.html.erb +38 -0
data/app/views/quarterdeck/shared/_data_table.html.erb +29 -0
data/app/views/quarterdeck/shared/_nav.html.erb +36 -0
data/app/views/quarterdeck/shared/_period_tabs.html.erb +31 -0
data/app/views/quarterdeck/shared/_stat_card.html.erb +22 -0
data/app/views/quarterdeck/visits/index.html.erb +115 -0
data/app/views/quarterdeck/visits/show.html.erb +72 -0
data/config/importmap.rb +5 -0
data/config/routes.rb +8 -0
data/lib/generators/quarterdeck/install_generator.rb +39 -0
data/lib/quarterdeck/engine.rb +19 -0
data/lib/quarterdeck/version.rb +3 -0
data/lib/quarterdeck.rb +19 -0
data/lib/tasks/quarterdeck_tasks.rake +4 -0
metadata +139 -0

data/app/javascript/quarterdeck/controllers/live_controller.js ADDED Viewed

@@ -0,0 +1,59 @@
+import { Controller } from "@hotwired/stimulus"
+export default class extends Controller {
+  static targets = ["activeVisitors", "currentPages", "recentEvents"]
+  static values = { url: String }
+  connect() {
+    this.poll()
+  }
+  disconnect() {
+    if (this.timer) clearTimeout(this.timer)
+  }
+  poll() {
+    fetch(this.urlValue)
+      .then(response => response.json())
+      .then(data => this.update(data))
+      .catch(() => {})
+      .finally(() => {
+        this.timer = setTimeout(() => this.poll(), 5000)
+      })
+  }
+  update(data) {
+    this.activeVisitorsTarget.textContent = data.active_visitors
+    if (this.hasCurrentPagesTarget) {
+      if (data.current_pages.length > 0) {
+        this.currentPagesTarget.innerHTML = data.current_pages.map(p =>
+          `<tr class="hover:bg-gray-50">
+            <td class="px-6 py-3 text-sm text-gray-900 truncate max-w-xs">${this.escapeHtml(p.url)}</td>
+            <td class="px-6 py-3 text-sm text-gray-600 text-right">${p.count}</td>
+          </tr>`
+        ).join("")
+      } else {
+        this.currentPagesTarget.innerHTML = `<tr><td colspan="2" class="px-6 py-8 text-sm text-gray-400 text-center">No active pages</td></tr>`
+      }
+    }
+    if (this.hasRecentEventsTarget) {
+      this.recentEventsTarget.innerHTML = data.recent_events.map(e =>
+        `<tr class="hover:bg-gray-50">
+          <td class="px-6 py-3 text-sm text-gray-900 whitespace-nowrap">${this.escapeHtml(e.time)}</td>
+          <td class="px-6 py-3 text-sm">
+            <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-indigo-50 text-indigo-700">${this.escapeHtml(e.name)}</span>
+          </td>
+          <td class="px-6 py-3 text-sm text-gray-500 font-mono">${this.escapeHtml(e.visitor || "")}</td>
+        </tr>`
+      ).join("")
+    }
+  }
+  escapeHtml(text) {
+    const div = document.createElement("div")
+    div.textContent = text || ""
+    return div.innerHTML
+  }
+}

data/app/jobs/quarterdeck/application_job.rb ADDED Viewed

@@ -0,0 +1,4 @@
+module Quarterdeck
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/quarterdeck/application_mailer.rb ADDED Viewed

@@ -0,0 +1,6 @@
+module Quarterdeck
+  class ApplicationMailer < ActionMailer::Base
+    default from: "from@example.com"
+    layout "mailer"
+  end
+end

data/app/models/quarterdeck/application_record.rb ADDED Viewed

@@ -0,0 +1,5 @@
+module Quarterdeck
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/views/layouts/quarterdeck/application.html.erb ADDED Viewed

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="h-full bg-gray-50">
+<head>
+  <title>Quarterdeck Analytics</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <%= javascript_importmap_tags("quarterdeck/application") if respond_to?(:javascript_importmap_tags) %>
+</head>
+<body class="h-full">
+  <div class="min-h-full">
+    <header class="bg-white shadow-sm border-b border-gray-200">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex items-center justify-between h-16">
+          <div class="flex items-center space-x-2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" 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>
+            <h1 class="text-xl font-bold text-gray-900">Quarterdeck</h1>
+          </div>
+        </div>
+      </div>
+    </header>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+      <%= render "quarterdeck/shared/nav" %>
+      <%= render "quarterdeck/shared/period_tabs" %>
+    </div>
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">
+      <%= yield %>
+    </main>
+  </div>
+</body>
+</html>

data/app/views/quarterdeck/campaigns/show.html.erb ADDED Viewed

@@ -0,0 +1,35 @@
+<div class="space-y-6">
+  <!-- Stats -->
+  <div class="flex items-center justify-between mb-2">
+    <div></div>
+    <%= link_to "Export CSV", url_for(request.query_parameters.merge(format: :csv)),
+      class: "text-xs text-indigo-600 hover:text-indigo-800 font-medium" %>
+  </div>
+  <div class="grid grid-cols-1 sm:grid-cols-1 gap-4">
+    <%= render "quarterdeck/shared/stat_card", title: "Total Campaign Visits", value: @total_campaign_visits %>
+  </div>
+  <!-- UTM Breakdowns -->
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+    <%= render "quarterdeck/shared/data_table", title: "Sources", label: "UTM Source", count_label: "Visits", data: @sources %>
+    <%= render "quarterdeck/shared/data_table", title: "Mediums", label: "UTM Medium", count_label: "Visits", data: @mediums %>
+    <%= render "quarterdeck/shared/data_table", title: "Campaigns", label: "UTM Campaign", count_label: "Visits", data: @campaigns %>
+    <%= render "quarterdeck/shared/data_table", title: "Terms", label: "UTM Term", count_label: "Visits", data: @terms %>
+    <%= render "quarterdeck/shared/data_table", title: "Content", label: "UTM Content", count_label: "Visits", data: @contents %>
+  </div>
+  <!-- Source Chart -->
+  <% if @sources.any? %>
+    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+      <h3 class="text-sm font-semibold text-gray-900 mb-4">Top Sources</h3>
+      <div class="h-64">
+        <canvas
+          data-controller="chart"
+          data-chart-type-value="doughnut"
+          data-chart-labels-value="<%= @sources.keys.first(8).to_json %>"
+          data-chart-data-value="<%= @sources.values.first(8).to_json %>"
+        ></canvas>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/views/quarterdeck/events/index.html.erb ADDED Viewed

@@ -0,0 +1,89 @@
+<div class="space-y-6">
+  <!-- Stats -->
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+    <%= render "quarterdeck/shared/stat_card", title: "Total Events", value: @total_events, previous_value: @prev_total_events %>
+    <%= render "quarterdeck/shared/stat_card", title: "Unique Event Names", value: @unique_events, previous_value: @prev_unique_events %>
+  </div>
+  <!-- Filter by event name -->
+  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+    <%= form_tag quarterdeck.events_path, method: :get, class: "flex items-end gap-3" do %>
+      <input type="hidden" name="period" value="<%= period %>">
+      <div class="flex-1">
+        <label class="block text-xs font-medium text-gray-500 mb-1">Event Name</label>
+        <select name="name" class="rounded-lg border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 w-full">
+          <option value="">All Events</option>
+          <% @event_names.each do |name, count| %>
+            <option value="<%= name %>" <%= "selected" if params[:name] == name %>><%= name %> (<%= count %>)</option>
+          <% end %>
+        </select>
+      </div>
+      <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 transition">
+        Filter
+      </button>
+      <% if params[:name].present? %>
+        <%= link_to "Clear", quarterdeck.events_path(period: period),
+          class: "text-sm text-gray-500 hover:text-gray-700 px-3 py-2" %>
+      <% end %>
+    <% end %>
+  </div>
+  <!-- Daily Events Chart -->
+  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+    <div class="flex items-center justify-between mb-4">
+      <h3 class="text-sm font-semibold text-gray-900">Events Over Time</h3>
+      <%= link_to "Export CSV", url_for(request.query_parameters.merge(format: :csv)),
+        class: "text-xs text-indigo-600 hover:text-indigo-800 font-medium" %>
+    </div>
+    <div class="h-64">
+      <canvas
+        data-controller="chart"
+        data-chart-type-value="bar"
+        data-chart-labels-value="<%= @daily_events.keys.map { |d| d.strftime("%b %d") }.to_json %>"
+        data-chart-data-value="<%= @daily_events.values.to_json %>"
+        data-chart-label-value="Events"
+      ></canvas>
+    </div>
+  </div>
+  <!-- Event Breakdown -->
+  <%= render "quarterdeck/shared/data_table", title: "Event Breakdown", label: "Event Name", count_label: "Count", data: @event_names %>
+  <!-- Recent Events -->
+  <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+    <div class="px-6 py-4 border-b border-gray-200">
+      <h3 class="text-sm font-semibold text-gray-900">Recent Events</h3>
+    </div>
+    <div class="overflow-x-auto">
+      <table class="min-w-full divide-y divide-gray-200">
+        <thead class="bg-gray-50">
+          <tr>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Properties</th>
+          </tr>
+        </thead>
+        <tbody class="bg-white divide-y divide-gray-200">
+          <% @events.each do |event| %>
+            <tr class="hover:bg-gray-50">
+              <td class="px-6 py-3 text-sm text-gray-900 whitespace-nowrap"><%= event.time.strftime("%b %d, %H:%M:%S") %></td>
+              <td class="px-6 py-3 text-sm">
+                <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-indigo-50 text-indigo-700">
+                  <%= event.name %>
+                </span>
+              </td>
+              <td class="px-6 py-3 text-sm text-gray-600 max-w-md truncate">
+                <% if event.properties.present? %>
+                  <code class="text-xs bg-gray-100 rounded px-1 py-0.5"><%= event.properties.to_json %></code>
+                <% end %>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+    <div class="px-6 py-3 border-t border-gray-200">
+      <%== @pagy.series_nav %>
+    </div>
+  </div>
+</div>

data/app/views/quarterdeck/geographics/show.html.erb ADDED Viewed

@@ -0,0 +1,32 @@
+<div class="space-y-6">
+  <div class="flex items-center justify-between">
+    <div></div>
+    <%= link_to "Export CSV", url_for(request.query_parameters.merge(format: :csv)),
+      class: "text-xs text-indigo-600 hover:text-indigo-800 font-medium" %>
+  </div>
+  <!-- Countries -->
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+    <%= render "quarterdeck/shared/data_table", title: "Countries", label: "Country", count_label: "Visits", data: @countries %>
+    <% if @countries.any? %>
+      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+        <h3 class="text-sm font-semibold text-gray-900 mb-4">Top Countries</h3>
+        <div class="h-64">
+          <canvas
+            data-controller="chart"
+            data-chart-type-value="doughnut"
+            data-chart-labels-value="<%= @countries.keys.first(8).to_json %>"
+            data-chart-data-value="<%= @countries.values.first(8).to_json %>"
+          ></canvas>
+        </div>
+      </div>
+    <% end %>
+  </div>
+  <!-- Regions & Cities -->
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+    <%= render "quarterdeck/shared/data_table", title: "Regions", label: "Region", count_label: "Visits", data: @regions %>
+    <%= render "quarterdeck/shared/data_table", title: "Cities", label: "City", count_label: "Visits", data: @cities %>
+  </div>
+</div>

data/app/views/quarterdeck/live/show.html.erb ADDED Viewed

@@ -0,0 +1,75 @@
+<div class="space-y-6" data-controller="live" data-live-url-value="<%= quarterdeck.live_path(format: :json) %>">
+  <!-- Active Visitors -->
+  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center">
+    <div class="inline-flex items-center gap-3">
+      <span class="relative flex h-3 w-3">
+        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+        <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
+      </span>
+      <span class="text-5xl font-bold text-gray-900" data-live-target="activeVisitors"><%= @active_visitors %></span>
+    </div>
+    <p class="mt-2 text-sm text-gray-500">active visitors in the last 5 minutes</p>
+  </div>
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+    <!-- Current Pages -->
+    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+      <div class="px-6 py-4 border-b border-gray-200">
+        <h3 class="text-sm font-semibold text-gray-900">Pages Being Viewed</h3>
+      </div>
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50">
+            <tr>
+              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Page</th>
+              <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Viewers</th>
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-200" data-live-target="currentPages">
+            <% if @current_pages.any? %>
+              <% @current_pages.each do |url, count| %>
+                <tr class="hover:bg-gray-50">
+                  <td class="px-6 py-3 text-sm text-gray-900 truncate max-w-xs"><%= url %></td>
+                  <td class="px-6 py-3 text-sm text-gray-600 text-right"><%= count %></td>
+                </tr>
+              <% end %>
+            <% else %>
+              <tr>
+                <td colspan="2" class="px-6 py-8 text-sm text-gray-400 text-center">No active pages</td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <!-- Live Event Stream -->
+    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+      <div class="px-6 py-4 border-b border-gray-200">
+        <h3 class="text-sm font-semibold text-gray-900">Live Event Stream</h3>
+      </div>
+      <div class="overflow-x-auto max-h-96 overflow-y-auto">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50 sticky top-0">
+            <tr>
+              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
+              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Event</th>
+              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Visitor</th>
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-200" data-live-target="recentEvents">
+            <% @recent_events.each do |event| %>
+              <tr class="hover:bg-gray-50">
+                <td class="px-6 py-3 text-sm text-gray-900 whitespace-nowrap"><%= event.time.strftime("%H:%M:%S") %></td>
+                <td class="px-6 py-3 text-sm">
+                  <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-indigo-50 text-indigo-700"><%= event.name %></span>
+                </td>
+                <td class="px-6 py-3 text-sm text-gray-500 font-mono"><%= event.visit&.visitor_token&.first(8) %></td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/quarterdeck/overview/show.html.erb ADDED Viewed

@@ -0,0 +1,38 @@
+<div class="space-y-8">
+  <!-- Stats -->
+  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+    <%= render "quarterdeck/shared/stat_card", title: "Total Visits", value: @total_visits, previous_value: @prev_total_visits %>
+    <%= render "quarterdeck/shared/stat_card", title: "Unique Visitors", value: @unique_visitors, previous_value: @prev_unique_visitors %>
+    <%= render "quarterdeck/shared/stat_card", title: "Total Events", value: @total_events, previous_value: @prev_total_events %>
+  </div>
+  <!-- Daily Visits Chart -->
+  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+    <div class="flex items-center justify-between mb-4">
+      <h3 class="text-sm font-semibold text-gray-900">Visits Over Time</h3>
+      <%= link_to "Export CSV", url_for(request.query_parameters.merge(format: :csv)),
+        class: "text-xs text-indigo-600 hover:text-indigo-800 font-medium" %>
+    </div>
+    <div class="h-64">
+      <canvas
+        data-controller="chart"
+        data-chart-type-value="line"
+        data-chart-labels-value="<%= @daily_visits.keys.map { |d| d.strftime("%b %d") }.to_json %>"
+        data-chart-data-value="<%= @daily_visits.values.to_json %>"
+        data-chart-label-value="Visits"
+      ></canvas>
+    </div>
+  </div>
+  <!-- Two Column Grid -->
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+    <%= render "quarterdeck/shared/data_table", title: "Top Pages", label: "Page", count_label: "Views", data: @top_pages %>
+    <%= render "quarterdeck/shared/data_table", title: "Top Referrers", label: "Referrer", count_label: "Visits", data: @top_referrers %>
+    <%= render "quarterdeck/shared/data_table", title: "Browsers", label: "Browser", count_label: "Visits", data: @browsers %>
+    <%= render "quarterdeck/shared/data_table", title: "Devices", label: "Device", count_label: "Visits", data: @devices %>
+    <%= render "quarterdeck/shared/data_table", title: "Operating Systems", label: "OS", count_label: "Visits", data: @os %>
+    <%= render "quarterdeck/shared/data_table", title: "Countries", label: "Country", count_label: "Visits", data: @countries %>
+    <%= render "quarterdeck/shared/data_table", title: "Top Events", label: "Event", count_label: "Count", data: @top_events %>
+    <%= render "quarterdeck/shared/data_table", title: "Campaigns", label: "Source", count_label: "Visits", data: @campaigns %>
+  </div>
+</div>

data/app/views/quarterdeck/shared/_data_table.html.erb ADDED Viewed

@@ -0,0 +1,29 @@
+<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+  <div class="px-6 py-4 border-b border-gray-200">
+    <h3 class="text-sm font-semibold text-gray-900"><%= title %></h3>
+  </div>
+  <div class="overflow-x-auto">
+    <table class="min-w-full divide-y divide-gray-200">
+      <thead class="bg-gray-50">
+        <tr>
+          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><%= label %></th>
+          <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"><%= count_label || "Count" %></th>
+        </tr>
+      </thead>
+      <tbody class="bg-white divide-y divide-gray-200">
+        <% if data.any? %>
+          <% data.each do |key, count| %>
+            <tr class="hover:bg-gray-50">
+              <td class="px-6 py-3 text-sm text-gray-900"><%= key.presence || "(none)" %></td>
+              <td class="px-6 py-3 text-sm text-gray-600 text-right"><%= number_with_delimiter(count) %></td>
+            </tr>
+          <% end %>
+        <% else %>
+          <tr>
+            <td colspan="2" class="px-6 py-8 text-sm text-gray-400 text-center">No data for this period</td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</div>

data/app/views/quarterdeck/shared/_nav.html.erb ADDED Viewed

@@ -0,0 +1,36 @@
+<%
+  nav_items = [
+    { name: "Overview", path: quarterdeck.root_path, active: controller_name == "overview" },
+    { name: "Visits", path: quarterdeck.visits_path, active: controller_name == "visits" },
+    { name: "Events", path: quarterdeck.events_path, active: controller_name == "events" },
+    { name: "Campaigns", path: quarterdeck.campaigns_path, active: controller_name == "campaigns" },
+    { name: "Geographic", path: quarterdeck.geographic_path, active: controller_name == "geographics" },
+    { name: "Live", path: quarterdeck.live_path, active: controller_name == "live", live: true }
+  ]
+%>
+<nav class="flex space-x-1 mb-4" aria-label="Tabs">
+  <% nav_items.each do |item| %>
+    <% if item[:active] %>
+      <%= link_to item[:path],
+        class: "bg-indigo-100 text-indigo-700 px-4 py-2 font-medium text-sm rounded-lg inline-flex items-center gap-1.5" do %>
+        <% if item[:live] %>
+          <span class="relative flex h-2 w-2">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+          </span>
+        <% end %>
+        <%= item[:name] %>
+      <% end %>
+    <% else %>
+      <%= link_to item[:path],
+        class: "text-gray-500 hover:text-gray-700 hover:bg-gray-100 px-4 py-2 font-medium text-sm rounded-lg transition inline-flex items-center gap-1.5" do %>
+        <% if item[:live] %>
+          <span class="relative flex h-2 w-2">
+            <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+          </span>
+        <% end %>
+        <%= item[:name] %>
+      <% end %>
+    <% end %>
+  <% end %>
+</nav>

data/app/views/quarterdeck/shared/_period_tabs.html.erb ADDED Viewed

@@ -0,0 +1,31 @@
+<%
+  periods = [
+    { label: "Today", value: "today" },
+    { label: "7 days", value: "7d" },
+    { label: "30 days", value: "30d" },
+    { label: "90 days", value: "90d" }
+  ]
+  custom_active = period == "custom"
+%>
+<div class="flex flex-wrap items-center gap-1 mb-6" data-controller="date-range">
+  <% periods.each do |p| %>
+    <% active = period == p[:value] %>
+    <%= link_to p[:label],
+      url_for(request.query_parameters.merge(period: p[:value]).except("start_date", "end_date")),
+      class: "px-3 py-1.5 text-xs font-medium rounded-md transition #{active ? 'bg-indigo-600 text-white' : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200'}" %>
+  <% end %>
+  <span class="px-3 py-1.5 text-xs font-medium rounded-md transition cursor-default <%= custom_active ? 'bg-indigo-600 text-white' : 'bg-white text-gray-600 border border-gray-200' %>">Custom</span>
+  <input type="date"
+    data-date-range-target="startDate"
+    data-action="change->date-range#submit"
+    value="<%= params[:start_date] %>"
+    class="px-2 py-1 text-xs rounded-md border border-gray-200 text-gray-700 focus:border-indigo-500 focus:ring-indigo-500">
+  <span class="text-xs text-gray-400">to</span>
+  <input type="date"
+    data-date-range-target="endDate"
+    data-action="change->date-range#submit"
+    value="<%= params[:end_date] %>"
+    class="px-2 py-1 text-xs rounded-md border border-gray-200 text-gray-700 focus:border-indigo-500 focus:ring-indigo-500">
+</div>

data/app/views/quarterdeck/shared/_stat_card.html.erb ADDED Viewed

@@ -0,0 +1,22 @@
+<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+  <dt class="text-sm font-medium text-gray-500 truncate"><%= title %></dt>
+  <dd class="mt-2 flex items-baseline gap-2">
+    <span class="text-3xl font-bold text-gray-900"><%= number_with_delimiter(value) %></span>
+    <% if local_assigns[:previous_value] && previous_value && previous_value > 0 %>
+      <% change = ((value - previous_value).to_f / previous_value * 100).round(1) %>
+      <% if change > 0 %>
+        <span class="inline-flex items-center text-xs font-medium text-green-700 bg-green-50 rounded-full px-2 py-0.5">
+          <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 15l7-7 7 7"/></svg>
+          <%= change %>%
+        </span>
+      <% elsif change < 0 %>
+        <span class="inline-flex items-center text-xs font-medium text-red-700 bg-red-50 rounded-full px-2 py-0.5">
+          <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="M19 9l-7 7-7-7"/></svg>
+          <%= change.abs %>%
+        </span>
+      <% else %>
+        <span class="inline-flex items-center text-xs font-medium text-gray-500 bg-gray-50 rounded-full px-2 py-0.5">—</span>
+      <% end %>
+    <% end %>
+  </dd>
+</div>

data/app/views/quarterdeck/visits/index.html.erb ADDED Viewed

@@ -0,0 +1,115 @@
+<div class="space-y-6">
+  <!-- Filters -->
+  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+    <%= form_tag quarterdeck.visits_path, method: :get, class: "flex flex-wrap items-end gap-3" do %>
+      <input type="hidden" name="period" value="<%= period %>">
+      <div class="flex-1 min-w-[200px]">
+        <label class="block text-xs font-medium text-gray-500 mb-1">Search</label>
+        <input type="text" name="search" value="<%= params[:search] %>"
+          placeholder="Landing page, referrer, or IP..."
+          class="w-full rounded-lg border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+      </div>
+      <div>
+        <label class="block text-xs font-medium text-gray-500 mb-1">Browser</label>
+        <select name="browser" class="rounded-lg border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+          <option value="">All</option>
+          <% @browsers.each do |b| %>
+            <option value="<%= b %>" <%= "selected" if params[:browser] == b %>><%= b %></option>
+          <% end %>
+        </select>
+      </div>
+      <div>
+        <label class="block text-xs font-medium text-gray-500 mb-1">Device</label>
+        <select name="device_type" class="rounded-lg border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+          <option value="">All</option>
+          <% @devices.each do |d| %>
+            <option value="<%= d %>" <%= "selected" if params[:device_type] == d %>><%= d %></option>
+          <% end %>
+        </select>
+      </div>
+      <div>
+        <label class="block text-xs font-medium text-gray-500 mb-1">OS</label>
+        <select name="os" class="rounded-lg border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+          <option value="">All</option>
+          <% @operating_systems.each do |o| %>
+            <option value="<%= o %>" <%= "selected" if params[:os] == o %>><%= o %></option>
+          <% end %>
+        </select>
+      </div>
+      <div>
+        <label class="block text-xs font-medium text-gray-500 mb-1">Country</label>
+        <select name="country" class="rounded-lg border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+          <option value="">All</option>
+          <% @countries_list.each do |c| %>
+            <option value="<%= c %>" <%= "selected" if params[:country] == c %>><%= c %></option>
+          <% end %>
+        </select>
+      </div>
+      <div class="flex items-center gap-2">
+        <label class="flex items-center gap-1.5 text-sm text-gray-600">
+          <input type="checkbox" name="utm_only" value="1" <%= "checked" if params[:utm_only] == "1" %>
+            class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+          UTM only
+        </label>
+      </div>
+      <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 transition">
+        Filter
+      </button>
+      <% if params.to_unsafe_h.except("controller", "action", "period").values.any?(&:present?) %>
+        <%= link_to "Clear", quarterdeck.visits_path(period: period),
+          class: "text-sm text-gray-500 hover:text-gray-700 px-3 py-2" %>
+      <% end %>
+    <% end %>
+  </div>
+  <!-- Visits Table -->
+  <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+    <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+      <h3 class="text-sm font-semibold text-gray-900">Visits</h3>
+      <%= link_to "Export CSV", url_for(request.query_parameters.merge(format: :csv)),
+        class: "text-xs text-indigo-600 hover:text-indigo-800 font-medium" %>
+    </div>
+    <div class="overflow-x-auto">
+      <table class="min-w-full divide-y divide-gray-200">
+        <thead class="bg-gray-50">
+          <tr>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Started</th>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Landing Page</th>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Referrer</th>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Browser</th>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Device</th>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">UTM Source</th>
+          </tr>
+        </thead>
+        <tbody class="bg-white divide-y divide-gray-200">
+          <% @visits.each do |visit| %>
+            <tr class="hover:bg-gray-50">
+              <td class="px-6 py-3 text-sm text-gray-900 whitespace-nowrap">
+                <%= link_to visit.started_at.strftime("%b %d, %H:%M"), quarterdeck.visit_path(visit),
+                  class: "text-indigo-600 hover:text-indigo-800" %>
+              </td>
+              <td class="px-6 py-3 text-sm text-gray-600 max-w-xs truncate"><%= visit.landing_page %></td>
+              <td class="px-6 py-3 text-sm text-gray-600"><%= visit.referring_domain %></td>
+              <td class="px-6 py-3 text-sm text-gray-600"><%= visit.browser %></td>
+              <td class="px-6 py-3 text-sm text-gray-600"><%= visit.device_type %></td>
+              <td class="px-6 py-3 text-sm text-gray-600"><%= [visit.city, visit.country].compact_blank.join(", ") %></td>
+              <td class="px-6 py-3 text-sm text-gray-600"><%= visit.utm_source %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+    <div class="px-6 py-3 border-t border-gray-200">
+      <%== @pagy.series_nav %>
+    </div>
+  </div>
+</div>