lookout-ahoy 0.1.0

data/app/queries/lookout/stats/views_per_visit_query.rb

@@ -0,0 +1,17 @@
+module Lookout
+  module Stats
+    class ViewsPerVisitQuery < BaseQuery
+      def build
+        events = event_query
+                   .joins(:visit)
+                   .select("#{::Lookout.visit.table_name}.started_at as started_at, count(#{Lookout.event.table_name}.name) / count(distinct #{Lookout.event.table_name}.visit_id) as views_per_visit")
+                   .where(name: Lookout.config.event[:view_name])
+                   .group("#{Lookout.visit.table_name}.started_at, #{Lookout.event.table_name}.visit_id")
+
+        ::Ahoy::Visit
+                     .select("views_per_visit as views_per_visit")
+                     .from(events, :views_per_visit_table)
+      end
+    end
+  end
+end

data/app/queries/lookout/stats/visit_duration_query.rb

@@ -0,0 +1,19 @@
+module Lookout
+  module Stats
+    class VisitDurationQuery < BaseQuery
+      def build
+        events = event_query
+                   .reselect("max(#{Lookout.event.table_name}.time) - min(#{Lookout.event.table_name}.time) as duration, #{Lookout.event.table_name}.visit_id")
+                   .group("#{Lookout.event.table_name}.visit_id")
+
+        # PostgreSQL has duration type, SQLite stores as numeric seconds
+        duration_cast = Lookout::DatabaseAdapter.postgresql? ? "duration::duration" : "duration"
+        
+        ::Ahoy::Visit
+          .select("#{duration_cast} as duration, started_at")
+          .from(events, :views_per_visit_table)
+          .joins("inner join #{Lookout.visit.table_name} on #{Lookout.visit.table_name}.id = views_per_visit_table.visit_id")
+      end
+    end
+  end
+end

data/app/queries/lookout/top_page_query.rb

@@ -0,0 +1,13 @@
+module Lookout
+  class TopPageQuery < ApplicationQuery
+    def build
+      event_query.with_routes
+                 .select(
+        "#{Lookout.config.event[:url_column]} as url",
+        "count(*) as count",
+        "sum(count(*)) over() as total_count"
+      ).group(Arel.sql ("(#{Lookout.config.event[:url_column]})"))
+                 .order(Arel.sql("count(#{Lookout.config.event[:url_column]}) desc"))
+    end
+  end
+end

data/app/queries/lookout/visit_query.rb

@@ -0,0 +1,42 @@
+module Lookout
+  class VisitQuery < ApplicationQuery
+
+    def build
+      shared_context = Ransack::Context.for(Lookout.visit)
+
+      visit_params = ransack_params_for(:visit).reject { |k,v| k.start_with?("events_") }
+      event_params = ransack_params_for(:event).reject { |k,v| k.start_with?("visit_") }
+
+      # Detect if event_params contain only time constraints (and related visit time injects)
+      time_keys = %w[time_gt time_lt time_gteq time_lteq visit_started_at_gt visit_started_at_lt]
+      event_params_without_time = event_params.reject { |k,_| time_keys.include?(k.to_s) || k.to_s.start_with?("c[") }
+      # Keep composite conditions under :c if present (properties), so detect them as filters
+      has_event_filters = event_params_without_time.any? || event_params.key?(:c)
+
+      if has_event_filters
+        search_parents = Lookout.visit.ransack(visit_params, context: shared_context)
+        search_children = Lookout.event.ransack(event_params.transform_keys { |key| "events_#{key}" }, context: shared_context)
+
+        shared_conditions = [search_parents, search_children].map { |search|
+          Ransack::Visitor.new.accept(search.base)
+        }
+
+        Lookout.visit.joins(shared_context.join_sources)
+              .where(shared_conditions.reduce(&:and))
+      else
+        # No event filters: do not join events; rely on visit constraints only
+        search_parents = Lookout.visit.ransack(visit_params, context: shared_context)
+        Lookout.visit.where(Ransack::Visitor.new.accept(search_parents.base))
+      end
+
+    end
+
+    def is_a?(other)
+      if other == ActiveRecord::Relation
+        return true
+      end
+
+      super(other)
+    end
+  end
+end

data/app/views/lookout/campaigns/index.html+details.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag :details do %>
+  <%= render Lookout::TableComponent.new(items: @campaigns, category_name: @campaign_type, unit_name: 'Visitors') %>
+  <span class="flex justify-center"><%= render_pagination %></span>
+<% end %>

data/app/views/lookout/campaigns/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :sources do %>
+  <%= render Lookout::TableComponent.new(items: @campaigns, category_name: @campaign_type, unit_name: 'Visitors') %>
+<% end %>

data/app/views/lookout/devices/_table.html.erb

@@ -0,0 +1,2 @@
+<%= render Lookout::TableComponent.new(items: @devices,
+                                           table: ::Lookout::Tables::DevicesTableComponent) %>

data/app/views/lookout/devices/index.html+details.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag :details do %>
+  <%= render 'table' %>
+  <span class="flex justify-center"><%= render_pagination %></span>
+<% end %>

data/app/views/lookout/devices/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :devices do %>
+  <%= render 'table' %>
+<% end %>

data/app/views/lookout/entry_pages/index.html+details.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag :details do %>
+  <%= render Lookout::TableComponent.new(items: @pages, category_name: 'Entry Pages', unit_name: 'Visitors') %>
+  <span class="flex justify-center"><%= render_pagination %></span>
+<% end %>

data/app/views/lookout/entry_pages/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :pages do %>
+  <%= render Lookout::TableComponent.new(items: @pages, category_name: 'Entry Pages', unit_name: 'Visitors') %>
+<% end %>

data/app/views/lookout/exit_pages/index.html+details.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag :details do %>
+  <%= render Lookout::TableComponent.new(items: @pages, category_name: 'Exit Pages', unit_name: 'Visitors') %>
+  <span class="flex justify-center"><%= render_pagination %></span>
+<% end %>

data/app/views/lookout/exit_pages/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :pages do %>
+  <%= render Lookout::TableComponent.new(items: @pages, category_name: 'Exit Pages', unit_name: 'Visitors') %>
+<% end %>

data/app/views/lookout/funnels/index.html.erb

@@ -0,0 +1,7 @@
+<%= turbo_frame_tag :funnels do %>
+  <ul>
+    <% @funnels.each do |label, count| %>
+      <li><%= label %>: <%= count %></li>
+    <% end %>
+  </ul>
+<% end %>

data/app/views/lookout/funnels/show.html.erb

@@ -0,0 +1,15 @@
+<%= turbo_frame_tag :goals do %>
+  <div class="p-4">
+    <% if params.dig(:q, :goal_id) %>
+      <p>Funnels are unavailable if filtering by a goal.</p>
+    <% elsif @funnel.steps.empty? %>
+      <p class="text-gray-400">No funnel data available. Make sure your events match the configured goals.</p>
+    <% else %>
+      <div style="height: 400px; width: 100%; display: flex; justify-content: center; align-items: center; position: relative; overflow: visible;">
+        <div style="width: 70%; height: 100%; position: relative;">
+          <canvas data-controller="funnel-chart" data-data="<%= @funnel.to_json %>"></canvas>
+        </div>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/views/lookout/goals/index.html.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag :goals do %>
+    <%= render Lookout::TableComponent.new(items: @presenter.goals,
+                                               table: ::Lookout::Tables::GoalsTableComponent) %>
+<% end %>

data/app/views/lookout/layouts/application.html.erb

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html data-theme='<%= Lookout.config.theme %>'>
+<head>
+  <title>Lookout</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <meta name="creator" content="joshmn">
+  <meta name="author" content="joshmn">
+  <meta name="contact" content="https://github.com/joshmn">
+  <meta name="twitter:creator" content="joshmn">
+  <meta name="twitter:site" content="josh.mn">
+  <meta name="og:site" content="josh.mn">
+  <meta name="description" content="Lookout">
+  <meta name="og:description" content="Lookout">
+  <link rel="icon" type="image/png" sizes="32x32" href="<%= image_path "lookout/favicon-32x32.png" %>">
+  <link rel="apple-touch-icon" sizes="180x180" href="<%= image_path "lookout/apple-touch-icon.png" %>">
+  <link rel="icon" type="image/png" sizes="16x16" href="<%= image_path "lookout/favicon-16x16.png" %>">
+  <link rel="mask-icon" href="<%= image_path "lookout/safari-pinned-tab.svg" %>" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#da532c">
+  <meta name="theme-color" content="#ffffff">
+  <link href="https://cdn.jsdelivr.net/npm/daisyui@3.5.0/dist/full.css" rel="stylesheet" type="text/css"/>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+  <%= lookout_importmap_tags %>
+  <style>
+      /* Lookout Dark Theme - Maximum Contrast */
+      [data-theme="dark"] {
+          --b1: 215 25% 8%;   /* Very dark blue-black background */
+          --b2: 215 20% 11%;  /* Darker panels - subtle separation */
+          --b3: 215 18% 14%;  /* Hover - slightly lighter */
+          --bc: 210 15% 92%;  /* Bright text */
+          --n: 215 22% 10%;   /* Neutral dark */
+          --nc: 210 15% 90%;  /* Neutral content */
+      }
+      
+      /* Force dark backgrounds */
+      html, body {
+          background-color: hsl(215, 25%, 8%) !important;
+          color: hsl(210, 15%, 92%) !important;
+      }
+      
+      /* Smooth select dropdown styling */
+      :root {
+          --ss-bg-color: hsl(215, 20%, 11%);
+          --ss-font-color: hsl(210, 15%, 92%);
+          --ss-border-color: hsl(215, 18%, 16%);
+      }
+
+      .ss-content{
+          position:absolute;
+          display:none;
+          height:auto;
+          flex-direction:column;
+          width:auto;
+          max-height:var(--ss-content-height);
+          box-sizing:border-box;
+          border:solid 1px var(--ss-border-color);
+          background-color:var(--ss-bg-color);
+          transition:transform var(--ss-animation-timing),opacity var(--ss-animation-timing);
+          opacity:0;
+          transform:scaleY(0);
+          transform-origin:center top;
+          overflow:hidden;
+          z-index:10000;
+      }
+
+      .ss-content.ss-open-below{
+          opacity:1;
+          transform:scaleY(1);
+          transform-origin:center top;
+          border-bottom-left-radius:var(--ss-border-radius);
+          border-bottom-right-radius:var(--ss-border-radius);
+          bottom: -100%;
+          right: 41%;
+          display: flex;
+      }
+
+      .ss-open-below.ss-content.ss-relevant {
+          bottom: -100%;
+          right: 41%;
+      }
+
+      .pagy-nav.pagination {
+          isolation: isolate;
+          display: inline-flex;
+          margin-right: -1px;
+          /* border-radius: 0.375rem; */
+          box-shadow: 0 1px 2px 0 hsl(var(--n) / var(--tw-text-opacity, 1));
+      }
+
+      .page.next a, .page.prev a, .page.next.disabled, .page.prev.disabled, .page a, .page.gap {
+          position: relative;
+          display: inline-flex;
+          align-items: center;
+          border: 1px solid hsl(var(--n) / var(--tw-text-opacity, 1));
+          padding: 0.5rem 1rem;
+          font-size: 0.875rem;
+          font-weight: 500;
+          color: hsl(var(--bc) / var(--tw-text-opacity, 1));
+      }
+
+      .page.next a:hover, .page.prev a:hover, .page a:hover {
+          background-color: hsl(var(--b3) / var(--tw-text-opacity, 1));
+          color: hsl(var(--ac) / var(--tw-text-opacity, 1));
+      }
+
+      .page.next a:focus, .page.prev a:focus, .page.next.disabled:focus, .page.prev.disabled:focus, .page a:focus, .page.gap:focus {
+          z-index: 20;
+      }
+
+      .page.prev a, .page.next a {
+          border-radius: 0.375rem 0 0 0.375rem;
+          background-color: hsl(var(--b2) /1);
+      }
+
+
+      .page.next.disabled, .page.prev.disabled {
+          border-radius: 0.375rem 0 0 0.375rem;
+          background-color: hsl(var(--b2) / 0.5);
+      }
+
+      .page.active {
+          z-index: 10;
+          border-color: hsl(var(--a) / var(--tw-text-opacity, 1));
+          background-color: hsl(var(--b3) / var(--tw-text-opacity, 1));
+          color: hsl(var(--ac) / var(--tw-text-opacity, 1));
+          border-radius: 0.375rem;
+          padding: 0.5rem 1rem;
+          font-size: 0.875rem;
+          font-weight: 500;
+      }
+  </style>
+</head>
+
+<body data-controller='application'>
+  <%= yield %>
+  <div class="flex justify-center border-t-4 border-base-100 py-4">
+    <div class="flex justify-around space-x-4 my-4">
+      <h5>Powered by <a href='https://github.com/RubyOnVibes/lookout' target="_blank" class="underline">Lookout v<%= Lookout::VERSION %></a></h5>
+    </div>
+  </div>
+</body>
+</html>

data/app/views/lookout/layouts/shared/_tile_loader.html.erb

@@ -0,0 +1,5 @@
+<div class="mt-1">
+  <div role="status" class="animate-pulse opacity-30 py-1">
+    <div class="h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full w-32 sm:w-48"></div>
+  </div>
+</div>

data/app/views/lookout/layouts/shared/_widget_disabled.html+details.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag "details" do %>
+  <p>Widget disabled.</p>
+<% end %>

data/app/views/lookout/layouts/shared/_widget_disabled.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag frame do %>
+  <p>Widget disabled.</p>
+<% end %>

data/app/views/lookout/locations/cities/index.html+details.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag :details do %>
+  <%= render Lookout::TableComponent.new(items: @cities, category_name: 'City', unit_name: 'Visitors') %>
+  <span class="flex justify-center"><%= render_pagination %></span>
+<% end %>

data/app/views/lookout/locations/cities/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :geography do %>
+  <%= render Lookout::TableComponent.new(items: @cities, category_name: 'City', unit_name: 'Visitors') %>
+<% end %>

data/app/views/lookout/locations/countries/index.html+details.erb

@@ -0,0 +1,5 @@
+<%= turbo_frame_tag :details do %>
+  <%= render Lookout::TableComponent.new(items: @countries, category_name: 'Country', unit_name: 'Visitors') %>
+  <span class="flex justify-center"><%= render_pagination %></span>
+
+<% end %>

data/app/views/lookout/locations/countries/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :geography do %>
+  <%= render Lookout::TableComponent.new(items: @countries, category_name: 'Country', unit_name: 'Visitors') %>
+<% end %>

data/app/views/lookout/locations/maps/_simple_map.html.erb

@@ -0,0 +1,26 @@
+<%= turbo_frame_tag :geography do %>
+  <div class="w-full h-96 flex items-center justify-center bg-base-300 rounded-lg p-4">
+    <div class="text-center space-y-4 w-full">
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 max-w-4xl mx-auto">
+        <% @countries.sort_by { |_, count| -count }.each do |country_code, count| %>
+          <div class="bg-base-200 rounded-lg p-3 hover:bg-base-100 transition-colors">
+            <div class="text-2xl mb-1"><%= country_flag(country_code) %></div>
+            <div class="font-semibold text-sm"><%= country_code %></div>
+            <div class="text-xs text-gray-400"><%= count %> visits</div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<%# Helper method to get country flag emoji %>
+<% 
+def country_flag(code)
+  return "🌍" if code.nil?
+  # Convert country code to flag emoji
+  code.upcase.chars.map { |c| (c.ord + 127397).chr(Encoding::UTF_8) }.join
+rescue
+  "🌍"
+end
+%>

data/app/views/lookout/locations/maps/show.html.erb

@@ -0,0 +1,106 @@
+<%= turbo_frame_tag :geography do %>
+  <div style="width: 100%; height: 400px; position: relative;">
+    <canvas id="geo-map-canvas" style="width: 100%; height: 100%;"></canvas>
+  </div>
+  
+  <script type="module">
+    import CountryMap from '<%= asset_path("lookout/helpers/countries.js") %>';
+    
+    (function() {
+      const countryData = <%= raw @countries.to_json %>;
+      
+      // Build numeric to ISO-2 mapping from our country data
+      const numericToIso = {};
+      Object.keys(CountryMap).forEach(key => {
+        numericToIso[CountryMap[key]['Numeric code']] = key;
+      });
+      
+      // Load Chart.js first
+      const chartScript = document.createElement('script');
+      chartScript.src = 'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js';
+      chartScript.onload = function() {
+        console.log('Chart.js loaded');
+        
+        // Then load ChartGeo
+        const geoScript = document.createElement('script');
+        geoScript.src = 'https://cdn.jsdelivr.net/npm/chartjs-chart-geo@4.3.6/build/index.umd.min.js';
+        geoScript.onload = function() {
+          console.log('ChartGeo loaded');
+          
+          // Now render the map
+          const canvas = document.getElementById('geo-map-canvas');
+          if (!canvas) {
+            console.error('Canvas not found');
+            return;
+          }
+          
+          fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json')
+            .then(r => r.json())
+            .then(data => {
+              console.log('World atlas loaded');
+              console.log('Country data from server:', countryData);
+              
+              const countries = ChartGeo.topojson.feature(data, data.objects.countries).features;
+              
+              // Map country codes to values using the numeric ID
+              countries.forEach(country => {
+                const isoCode = numericToIso[country.id];
+                country.value = isoCode ? (countryData[isoCode] || 0) : 0;
+                if (country.value > 0) {
+                  console.log(`Matched ${country.properties.name} (${country.id} -> ${isoCode}): ${country.value}`);
+                }
+              });
+              
+              const dataWithValues = countries.filter(d => d.value > 0);
+              console.log(`Countries with data: ${dataWithValues.length}`, dataWithValues.map(d => ({name: d.properties.name, value: d.value})));
+              
+              return countries;
+            })
+            .then(countries => {
+              new Chart(canvas.getContext('2d'), {
+                type: 'choropleth',
+                data: {
+                  labels: countries.map(d => d.properties.name),
+                  datasets: [{
+                    label: 'Visits',
+                    data: countries.map(d => ({feature: d, value: d.value}))
+                  }]
+                },
+                options: {
+                  showOutline: false,
+                  showGraticule: false,
+                  plugins: {
+                    legend: { display: false }
+                  },
+                  scales: {
+                    projection: {
+                      axis: 'x',
+                      projection: 'equalEarth'
+                    },
+                    color: {
+                      axis: 'x',
+                      quantize: 5,
+                      legend: {
+                        position: 'bottom-right',
+                        align: 'right'
+                      }
+                    }
+                  }
+                }
+              });
+              console.log('Map rendered successfully');
+            })
+            .catch(err => console.error('Map error:', err));
+        };
+        geoScript.onerror = function() {
+          console.error('Failed to load ChartGeo');
+        };
+        document.head.appendChild(geoScript);
+      };
+      chartScript.onerror = function() {
+        console.error('Failed to load Chart.js');
+      };
+      document.head.appendChild(chartScript);
+    })();
+  </script>
+<% end %>

data/app/views/lookout/locations/regions/index.html+details.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag :details do %>
+  <%= render Lookout::TableComponent.new(items: @regions, category_name: 'Region', unit_name: 'Visitors') %>
+  <span class="flex justify-center"><%= render_pagination %></span>
+<% end %>

data/app/views/lookout/locations/regions/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :geography do %>
+  <%= render Lookout::TableComponent.new(items: @regions, category_name: 'Region', unit_name: 'Visitors') %>
+<% end %>

data/app/views/lookout/properties/_form.html.erb

@@ -0,0 +1,6 @@
+<select class="select text-accent select-sm w-full max-w-sm" data-controller="properties" data-action="change->properties#handleChange">
+  <option></option>
+  <% @options.each do |key, value| %>
+    <option value="<%= property_path(id: key) %>" <%= 'selected' if local_assigns[:selected] == value %>><%= value %></option>
+  <% end %>
+</select>

data/app/views/lookout/properties/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :goals do %>
+  <%= render 'lookout/properties/form' %>
+<% end %>

data/app/views/lookout/properties/show.html.erb

@@ -0,0 +1,6 @@
+<%= turbo_frame_tag :goals do %>
+  <%= render 'lookout/properties/form', selected: Base64.strict_decode64(params[:id]) %>
+
+  <%= render Lookout::TableComponent.new(items: @properties,
+                                             table: ::Lookout::Tables::PropertiesTableComponent) %>
+<% end %>

data/app/views/lookout/realtimes/show.html.erb

@@ -0,0 +1,9 @@
+<%= turbo_frame_tag :realtime do %>
+  <div>
+    <a class="block ml-1 md:ml-2 mr-auto text-xs md:text-sm font-bold " title="" data-realtime-target="label">
+      <svg class="inline w-2 mr-1 md:mr-2 text-green-500 fill-current animate-pulse" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="8" cy="8" r="8"></circle>
+      </svg><%= @total %> <span class="hidden sm:inline-block">current visitors</span>
+    </a>
+  </div>
+<% end %>

data/app/views/lookout/roots/_filters.html.erb

@@ -0,0 +1,80 @@
+<%= form_with url: url_for(params.permit!.except(:q)), method: :get, data: { turbo_frame: "_top", controller: "filter-form", action: "reset->filter-form#handleReset" } do |form| %>
+  <% non_filter_ransack_params.each do |k,v| %>
+    <%= form.hidden_field k, value: v %>
+  <% end %>
+  <% Lookout.config.filters.each do |name, filters| %>
+    <%= render Lookout::Filter::ModalComponent.new(title: "Filter by #{name}", id: "#{filters.modal_name}") do |modal| %>
+      <% modal.with_modal_display do %>
+        <% filters.each do |filter| %>
+          <%= render Lookout::Filter::SelectComponent.new(label: filter.label, column: filter.column, url: public_send(filter.url), predicates: filter.predicates, multiple: filter.multiple, form: form) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render Lookout::Filter::ModalComponent.new(title: "Filter by Custom Property", id: "customPropertyFilterModal") do |modal| %>
+    <% modal.with_modal_display do %>
+      <div data-controller="property-filter">
+        <fieldset class="flex space-x-4 items-end">
+          <% if current_property_filter %>
+            <%= render ::Lookout::ComboboxComponent.new(name: "", multiple: false, column: "", url: filters_properties_names_path, value: [current_property_filter[:key].delete_prefix("properties.")], select_html: { "data-property-filter-target" => 'name', id: "property-name" }) %>
+          <% else %>
+            <%= render ::Lookout::ComboboxComponent.new(name: "", multiple: false, column: "", url: filters_properties_names_path, select_html: { "data-property-filter-target" => 'name', id: "property-name" } ) %>
+          <% end %>
+
+          <div class="flex flex-col w-[20%]">
+            <select class='select select-primary bg-gray-900 ring-0  focus-within:ring-0 focus-within:ring-0 focus:ring-0 focus:outline-none inline-flex justify-between items-center w-full rounded-md border px-4 py-2 text-sm'>
+              <option value="in">in</option>
+            </select>
+          </div>
+
+          <% if current_property_filter %>
+            <%= render ::Lookout::ComboboxComponent.new(name: "q[#{current_property_filter[:key]}_in]", multiple: false, column: "", url: filters_properties_values_path, value: [current_property_filter[:value]], select_html: { "data-property-filter-target" => 'value', id: "property-value" } ) %>
+          <% else %>
+            <%= render ::Lookout::ComboboxComponent.new(name: "", multiple: false, column: "", url: filters_properties_values_path, select_html: { "data-property-filter-target" => 'value', id: "property-value" }, disabled: true) %>
+          <% end %>
+
+        </fieldset>
+
+      </div>
+    <% end %>
+  <% end %>
+
+  <%= render Lookout::Filter::ModalComponent.new(title: "Custom Range", id: "customRangeModal") do |modal| %>
+    <% modal.with_modal_display do %>
+      <div class="flex gap-2 w-full">
+        <div class="form-control w-full max-w-xs">
+          <label class="label" for="start_date">
+            <span class="label-text">Start Date</span>
+          </label>
+          <input type="datetime-local" id="start_date" name="start_date" class="input input-bordered w-full" value="<%= params[:start_date] %>" />
+        </div>
+        <div class="form-control w-full max-w-xs">
+          <label class="label" for="end_date">
+            <span class="label-text">End Date</span>
+          </label>
+          <input type="datetime-local" id="end_date" name="end_date" class="input input-bordered w-full" value="<%= params[:end_date] %>" />
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+
+  <%= render Lookout::Filter::ModalComponent.new(title: "Custom Comparison", id: "customComparisonModal") do |modal| %>
+    <% modal.with_modal_display do %>
+      <div class="flex gap-2 w-full">
+        <div class="form-control w-full max-w-xs">
+          <label class="label" for="start_date">
+            <span class="label-text">Start Date</span>
+          </label>
+          <input type="datetime-local" id="start_date" name="compare_to_start_date" class="input input-bordered w-full" value="<%= params[:compare_to_start_date] %>" />
+        </div>
+        <div class="form-control w-full max-w-xs">
+          <label class="label" for="end_date">
+            <span class="label-text">End Date</span>
+          </label>
+          <input type="datetime-local" id="end_date" name="compare_to_end_date" class="input input-bordered w-full" value="<%= params[:compare_to_end_date] %>" />
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>