dbviewer 0.5.6 → 0.5.8

data/app/views/dbviewer/tables/show.html.erb

@@ -777,7 +777,11 @@
             const primaryKeyValue = recordData[Object.keys(recordData).find(key => key === 'id') || Object.keys(recordData)[0]];
             
             if (primaryKeyValue !== null && primaryKeyValue !== undefined && primaryKeyValue !== '') {
-              relationshipsContent.appendChild(createRelationshipSection('Has Many', reverseForeignKeys, recordData, 'has_many', primaryKeyValue));
+              const hasManySection = createRelationshipSection('Has Many', reverseForeignKeys, recordData, 'has_many', primaryKeyValue);
+              relationshipsContent.appendChild(hasManySection);
+              
+              // Fetch relationship counts asynchronously
+              fetchRelationshipCounts('<%= @table_name %>', primaryKeyValue, reverseForeignKeys, hasManySection);
             }
           }
           
@@ -1433,6 +1437,55 @@
   });
   
   // Helper function to create relationship sections
+  // Function to fetch relationship counts from API
+  async function fetchRelationshipCounts(tableName, recordId, relationships, hasManySection) {
+    try {
+      const response = await fetch(`/dbviewer/api/tables/${tableName}/relationship_counts?record_id=${recordId}`);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      
+      const data = await response.json();
+      
+      // Update each count in the UI
+      const countSpans = hasManySection.querySelectorAll('.relationship-count');
+      
+      relationships.forEach((relationship, index) => {
+        const countSpan = countSpans[index];
+        if (countSpan) {
+          const relationshipData = data.relationships.find(r => 
+            r.table === relationship.from_table && r.foreign_key === relationship.column
+          );
+          
+          if (relationshipData) {
+            const count = relationshipData.count;
+            let badgeClass = 'bg-secondary';
+            let badgeText = `${count} record${count !== 1 ? 's' : ''}`;
+            
+            // Use different colors based on count
+            if (count > 0) {
+              badgeClass = count > 10 ? 'bg-warning' : 'bg-success';
+            }
+            
+            countSpan.innerHTML = `<span class="badge ${badgeClass}">${badgeText}</span>`;
+          } else {
+            // Fallback if no data found
+            countSpan.innerHTML = '<span class="badge bg-danger">Error</span>';
+          }
+        }
+      });
+      
+    } catch (error) {
+      console.error('Error fetching relationship counts:', error);
+      
+      // Show error state in UI
+      const countSpans = hasManySection.querySelectorAll('.relationship-count');
+      countSpans.forEach(span => {
+        span.innerHTML = '<span class="badge bg-danger">Error</span>';
+      });
+    }
+  }
+
   function createRelationshipSection(title, relationships, recordData, type, primaryKeyValue = null) {
     const section = document.createElement('div');
     section.className = 'relationship-section mb-4';
@@ -1503,7 +1556,12 @@
             <span class="text-muted">${fk.from_table}.</span><strong>${fk.column}</strong>
           </td>
           <td>
-            <span class="badge bg-secondary">View All</span>
+            <span class="relationship-count">
+              <span class="badge bg-secondary">
+                <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+                Loading...
+              </span>
+            </span>
           </td>
           <td>
             <a href="/dbviewer/tables/${fk.from_table}?column_filters[${fk.column}]=${encodeURIComponent(primaryKeyValue)}" 
@@ -1525,3 +1583,1013 @@
     return section;
   }
 </script>
+
+<!-- Floating Creation Filter - Only visible on desktop and on table details page -->
+<% if has_timestamp_column?(@table_name) %>
+<div class="floating-creation-filter d-none d-lg-block">
+  <button class="btn btn-primary btn-lg shadow-lg floating-filter-btn" 
+          type="button" 
+          data-bs-toggle="offcanvas" 
+          data-bs-target="#creationFilterOffcanvas" 
+          aria-controls="creationFilterOffcanvas"
+          title="Creation Date Filter">
+    <i class="bi bi-calendar-range"></i>
+    <% if @creation_filter_start.present? || @creation_filter_end.present? %>
+      <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success">
+        <i class="bi bi-check"></i>
+      </span>
+    <% end %>
+  </button>
+</div>
+
+<!-- Creation Filter Offcanvas -->
+<div class="offcanvas offcanvas-end" tabindex="-1" id="creationFilterOffcanvas" aria-labelledby="creationFilterOffcanvasLabel">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="creationFilterOffcanvasLabel">
+      <i class="bi bi-calendar-range me-2"></i>Creation Date Filter
+    </h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+    <form id="floatingCreationFilterForm" action="<%= request.path %>" method="get" class="mb-0">
+      <!-- Preserve existing query parameters -->
+      <input type="hidden" name="page" value="<%= @current_page %>">
+      <input type="hidden" name="per_page" value="<%= @per_page %>">
+      <input type="hidden" name="order_by" value="<%= @order_by %>">
+      <input type="hidden" name="order_direction" value="<%= @order_direction %>">
+      
+      <!-- Preserve column filters -->
+      <% @column_filters.each do |key, value| %>
+        <% unless key.to_s.start_with?('created_at') %>
+          <input type="hidden" name="column_filters[<%= key %>]" value="<%= value %>">
+        <% end %>
+      <% end %>
+      
+      <div class="mb-3">
+        <p class="text-muted small">
+          <i class="bi bi-info-circle me-1"></i>
+          Filter records by their creation date and time. This applies to the <code>created_at</code> column.
+        </p>
+      </div>
+      
+      <!-- Date range picker -->
+      <div class="mb-3">
+        <label for="floatingCreationFilterRange" class="form-label">Date Range</label>
+        <input type="text" 
+               id="floatingCreationFilterRange" 
+               name="creation_filter_range" 
+               class="form-control" 
+               placeholder="Select date range..."
+               readonly>
+        <!-- Hidden inputs for form submission -->
+        <input type="hidden" id="creation_filter_start" name="creation_filter_start" value="<%= @creation_filter_start %>">
+        <input type="hidden" id="creation_filter_end" name="creation_filter_end" value="<%= @creation_filter_end %>">
+      </div>
+      
+      <!-- Quick preset buttons -->
+      <div class="mb-3">
+        <label class="form-label">Quick Presets</label>
+        <div class="d-grid gap-1">
+          <button type="button" class="btn btn-outline-secondary btn-sm preset-btn" data-preset="lastminute">
+            <i class="bi bi-clock me-1"></i>Last Minute
+          </button>
+          <button type="button" class="btn btn-outline-secondary btn-sm preset-btn" data-preset="last5minutes">
+            <i class="bi bi-clock-history me-1"></i>Last 5 Minutes
+          </button>
+          <button type="button" class="btn btn-outline-secondary btn-sm preset-btn" data-preset="today">
+            <i class="bi bi-calendar-day me-1"></i>Today
+          </button>
+          <button type="button" class="btn btn-outline-secondary btn-sm preset-btn" data-preset="yesterday">
+            <i class="bi bi-calendar-minus me-1"></i>Yesterday
+          </button>
+          <button type="button" class="btn btn-outline-secondary btn-sm preset-btn" data-preset="last7days">
+            <i class="bi bi-calendar-week me-1"></i>Last 7 Days
+          </button>
+          <button type="button" class="btn btn-outline-secondary btn-sm preset-btn" data-preset="last30days">
+            <i class="bi bi-calendar-month me-1"></i>Last 30 Days
+          </button>
+          <button type="button" class="btn btn-outline-secondary btn-sm preset-btn" data-preset="thismonth">
+            <i class="bi bi-calendar3 me-1"></i>This Month
+          </button>
+        </div>
+      </div>
+      
+      <div class="d-grid gap-2">
+        <button type="submit" class="btn btn-primary">
+          <i class="bi bi-funnel me-1"></i>Apply Filter
+        </button>
+        <% if @creation_filter_start.present? || @creation_filter_end.present? %>
+          <% 
+            # Preserve other query params when clearing creation filter
+            clear_params = {
+              clear_creation_filter: true,
+              page: @current_page,
+              per_page: @per_page,
+              order_by: @order_by,
+              order_direction: @order_direction
+            }
+            # Add column filters except created_at ones
+            @column_filters.each do |key, value|
+              unless key.to_s.start_with?('created_at')
+                clear_params["column_filters[#{key}]"] = value
+              end
+            end
+          %>
+          <a href="<%= request.path %>?<%= clear_params.to_query %>" class="btn btn-outline-secondary">
+            <i class="bi bi-x-circle me-1"></i>Clear Filter
+          </a>
+        <% end %>
+      </div>
+      
+      <div class="mt-3">
+        <% if @creation_filter_start.present? || @creation_filter_end.present? %>
+          <div class="alert alert-success alert-sm">
+            <i class="bi bi-check-circle-fill me-1"></i>
+            <strong>Filter Active:</strong> Showing records
+            <% if @creation_filter_start.present? && @creation_filter_end.present? %>
+              between <%= DateTime.parse(@creation_filter_start).strftime("%b %d, %Y %I:%M %p") %> 
+              and <%= DateTime.parse(@creation_filter_end).strftime("%b %d, %Y %I:%M %p") %>
+            <% elsif @creation_filter_start.present? %>
+              from <%= DateTime.parse(@creation_filter_start).strftime("%b %d, %Y %I:%M %p") %> onwards
+            <% elsif @creation_filter_end.present? %>
+              up to <%= DateTime.parse(@creation_filter_end).strftime("%b %d, %Y %I:%M %p") %>
+            <% end %>
+            
+            <% if @current_page == 1 && @records && @records.rows && @records.rows.empty? %>
+              <div class="mt-2 text-warning">
+                <i class="bi bi-exclamation-triangle-fill me-1"></i>
+                No records match the current filter criteria.
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </form>
+  </div>
+</div>
+
+<style>
+  /* Floating creation filter button */
+  .floating-creation-filter {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    z-index: 1050;
+  }
+  
+  .floating-filter-btn {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border: none;
+    position: relative;
+    background: var(--bs-primary);
+    color: white;
+    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.4);
+  }
+  
+  .floating-filter-btn:hover {
+    transform: translateY(-3px) scale(1.05);
+    box-shadow: 0 8px 25px rgba(var(--bs-primary-rgb), 0.5) !important;
+    background: var(--bs-primary) !important;
+    color: white !important;
+  }
+  
+  .floating-filter-btn:active {
+    transform: translateY(-1px) scale(1.02);
+    transition: all 0.1s ease;
+  }
+  
+  .floating-filter-btn:focus {
+    outline: 2px solid rgba(var(--bs-primary-rgb), 0.5);
+    outline-offset: 2px;
+  }
+  
+  /* Badge for active filter indicator */
+  .floating-filter-btn .badge {
+    font-size: 0.6rem;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bs-success) !important;
+    animation: pulse 2s infinite;
+  }
+  
+  @keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+    100% { transform: scale(1); }
+  }
+  
+  /* Better datetime input styling for the floating filter */
+  #creationFilterOffcanvas .form-control {
+    border-radius: 6px;
+    border: 1px solid var(--bs-border-color);
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    transition: all 0.15s ease-in-out;
+  }
+  
+  #creationFilterOffcanvas .form-control:focus {
+    border-color: var(--bs-primary);
+    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
+    background-color: var(--bs-body-bg);
+  }
+  
+  /* Offcanvas enhancements */
+  #creationFilterOffcanvas {
+    backdrop-filter: blur(10px);
+  }
+  
+  #creationFilterOffcanvas .offcanvas-header {
+    background: var(--bs-body-bg);
+    border-bottom: 1px solid var(--bs-border-color);
+    padding: 1.25rem;
+  }
+  
+  #creationFilterOffcanvas .offcanvas-body {
+    background: var(--bs-body-bg);
+    padding: 1.25rem;
+  }
+  
+  #creationFilterOffcanvas .offcanvas-title {
+    color: var(--bs-body-color);
+    font-weight: 600;
+  }
+  
+  /* Dark mode specific enhancements */
+  [data-bs-theme="dark"] .floating-filter-btn {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(var(--bs-primary-rgb), 0.2);
+  }
+  
+  [data-bs-theme="dark"] .floating-filter-btn:hover {
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--bs-primary-rgb), 0.3) !important;
+  }
+  
+  [data-bs-theme="dark"] #creationFilterOffcanvas .offcanvas-header {
+    background: var(--bs-dark);
+    border-bottom-color: var(--bs-border-color-translucent);
+  }
+  
+  [data-bs-theme="dark"] #creationFilterOffcanvas .offcanvas-body {
+    background: var(--bs-dark);
+  }
+  
+  [data-bs-theme="dark"] #creationFilterOffcanvas .form-control {
+    background-color: var(--bs-body-bg);
+    border-color: var(--bs-border-color-translucent);
+  }
+  
+  [data-bs-theme="dark"] #creationFilterOffcanvas .form-control:focus {
+    background-color: var(--bs-body-bg);
+    border-color: var(--bs-primary);
+  }
+  
+  /* Date range picker styling */
+  #floatingCreationFilterRange {
+    cursor: pointer;
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    border: 1px solid var(--bs-border-color);
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
+  }
+  
+  #floatingCreationFilterRange:focus {
+    border-color: var(--bs-primary);
+    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
+    background-color: var(--bs-body-bg);
+  }
+  
+  #floatingCreationFilterRange::placeholder {
+    color: var(--bs-secondary-color);
+    opacity: 0.7;
+  }
+  
+  /* Enhanced dark mode support for input */
+  [data-bs-theme="dark"] #floatingCreationFilterRange {
+    background-color: var(--bs-body-bg);
+    border-color: var(--bs-border-color-translucent);
+    color: var(--bs-body-color);
+  }
+  
+  [data-bs-theme="dark"] #floatingCreationFilterRange:focus {
+    background-color: var(--bs-body-bg);
+    border-color: var(--bs-primary);
+    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
+  }
+  
+  /* Preset buttons styling */
+  .preset-btn {
+    font-size: 0.8rem;
+    padding: 0.35rem 0.75rem;
+    text-align: left;
+    justify-content: flex-start;
+    border: 1px solid var(--bs-border-color);
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    transition: all 0.2s ease;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .preset-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(var(--bs-primary-rgb), 0.1), transparent);
+    transition: left 0.3s ease;
+  }
+  
+  .preset-btn:hover {
+    background-color: var(--bs-primary);
+    color: white;
+    border-color: var(--bs-primary);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(var(--bs-primary-rgb), 0.2);
+  }
+  
+  .preset-btn:hover::before {
+    left: 100%;
+  }
+  
+  .preset-btn:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 2px rgba(var(--bs-primary-rgb), 0.2);
+  }
+  
+  .preset-btn i {
+    opacity: 0.8;
+    transition: opacity 0.2s ease;
+  }
+  
+  .preset-btn:hover i {
+    opacity: 1;
+  }
+  
+  /* Dark mode enhancements for preset buttons */
+  [data-bs-theme="dark"] .preset-btn {
+    background-color: var(--bs-dark);
+    border-color: var(--bs-border-color-translucent);
+    color: var(--bs-body-color);
+  }
+  
+  [data-bs-theme="dark"] .preset-btn:hover {
+    background-color: var(--bs-primary);
+    color: white;
+    border-color: var(--bs-primary);
+    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.3);
+  }
+  
+  /* Flatpickr theme adjustments */
+  .flatpickr-calendar {
+    border-radius: 8px;
+    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--bs-border-color);
+    background: var(--bs-body-bg);
+    font-family: var(--bs-body-font-family);
+  }
+  
+  .flatpickr-months {
+    background: var(--bs-body-bg);
+    border-bottom: 1px solid var(--bs-border-color);
+    border-radius: 8px 8px 0 0;
+  }
+  
+  .flatpickr-month {
+    color: var(--bs-body-color);
+    fill: var(--bs-body-color);
+  }
+  
+  .flatpickr-current-month {
+    color: var(--bs-body-color);
+  }
+  
+  .flatpickr-current-month .flatpickr-monthDropdown-month {
+    background: var(--bs-body-bg);
+    color: var(--bs-body-color);
+  }
+  
+  .flatpickr-weekdays {
+    background: var(--bs-body-bg);
+  }
+  
+  .flatpickr-weekday {
+    color: var(--bs-secondary-color);
+    font-weight: 600;
+    font-size: 0.75rem;
+  }
+  
+  .flatpickr-day {
+    color: var(--bs-body-color);
+    border-radius: 4px;
+    transition: all 0.2s ease;
+  }
+  
+  .flatpickr-day:hover {
+    background: var(--bs-primary-bg-subtle);
+    color: var(--bs-primary);
+    border-color: var(--bs-primary-border-subtle);
+  }
+  
+  .flatpickr-day.selected {
+    background: var(--bs-primary);
+    color: white;
+    border-color: var(--bs-primary);
+    box-shadow: 0 2px 4px rgba(var(--bs-primary-rgb), 0.3);
+  }
+  
+  .flatpickr-day.selected:hover {
+    background: var(--bs-primary);
+    color: white;
+  }
+  
+  .flatpickr-day.inRange {
+    background: var(--bs-primary-bg-subtle);
+    color: var(--bs-primary);
+    border-color: transparent;
+  }
+  
+  .flatpickr-day.startRange {
+    background: var(--bs-primary);
+    color: white;
+    border-radius: 4px 0 0 4px;
+  }
+  
+  .flatpickr-day.endRange {
+    background: var(--bs-primary);
+    color: white;
+    border-radius: 0 4px 4px 0;
+  }
+  
+  .flatpickr-day.startRange.endRange {
+    border-radius: 4px;
+  }
+  
+  .flatpickr-day.today {
+    border-color: var(--bs-primary);
+    color: var(--bs-primary);
+    font-weight: 600;
+  }
+  
+  .flatpickr-day.today:hover {
+    background: var(--bs-primary);
+    color: white;
+  }
+  
+  .flatpickr-day.disabled {
+    color: var(--bs-secondary-color);
+    opacity: 0.5;
+  }
+  
+  .flatpickr-time {
+    background: var(--bs-body-bg);
+    border-radius: 0 0 8px 8px;
+  }
+  
+  .flatpickr-time input {
+    background: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  }
+  
+  .flatpickr-time input:focus {
+    border-color: var(--bs-primary);
+    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
+    outline: 0;
+  }
+  
+  .flatpickr-time .flatpickr-time-separator {
+    color: var(--bs-body-color);
+  }
+  
+  .flatpickr-prev-month,
+  .flatpickr-next-month {
+    color: var(--bs-body-color);
+    fill: var(--bs-body-color);
+    transition: color 0.2s ease;
+  }
+  
+  .flatpickr-prev-month:hover,
+  .flatpickr-next-month:hover {
+    color: var(--bs-primary);
+    fill: var(--bs-primary);
+  }
+  
+  /* Dark mode specific enhancements */
+  [data-bs-theme="dark"] .flatpickr-calendar {
+    background: var(--bs-dark);
+    border-color: var(--bs-border-color-translucent);
+    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4);
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-months {
+    background: var(--bs-dark);
+    border-bottom-color: var(--bs-border-color-translucent);
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-weekdays {
+    background: var(--bs-dark);
+  }
+  
+  /* Enhanced dark mode day styling for better contrast */
+  [data-bs-theme="dark"] .flatpickr-day {
+    color: #e9ecef !important;
+    background: transparent;
+    border: 1px solid transparent;
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-day:hover {
+    background: rgba(var(--bs-primary-rgb), 0.25) !important;
+    color: #ffffff !important;
+    border-color: rgba(var(--bs-primary-rgb), 0.4);
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-day.inRange {
+    background: rgba(var(--bs-primary-rgb), 0.2) !important;
+    color: #ffffff !important;
+    border-color: transparent;
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-day.selected {
+    background: var(--bs-primary) !important;
+    color: #ffffff !important;
+    border-color: var(--bs-primary);
+    box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.4);
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-day.selected:hover {
+    background: var(--bs-primary) !important;
+    color: #ffffff !important;
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-day.startRange {
+    background: var(--bs-primary) !important;
+    color: #ffffff !important;
+    border-radius: 4px 0 0 4px;
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-day.endRange {
+    background: var(--bs-primary) !important;
+    color: #ffffff !important;
+    border-radius: 0 4px 4px 0;
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-day.startRange.endRange {
+    border-radius: 4px;
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-day.today {
+    border-color: var(--bs-primary) !important;
+    color: var(--bs-primary) !important;
+    font-weight: 600;
+    background: rgba(var(--bs-primary-rgb), 0.1);
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-day.today:hover {
+    background: var(--bs-primary) !important;
+    color: #ffffff !important;
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-day.disabled {
+    color: #6c757d !important;
+    opacity: 0.4;
+    background: transparent !important;
+  }
+  
+  /* Dark mode other day states */
+  [data-bs-theme="dark"] .flatpickr-day.nextMonthDay,
+  [data-bs-theme="dark"] .flatpickr-day.prevMonthDay {
+    color: #6c757d !important;
+    opacity: 0.6;
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-day.nextMonthDay:hover,
+  [data-bs-theme="dark"] .flatpickr-day.prevMonthDay:hover {
+    background: rgba(var(--bs-primary-rgb), 0.15) !important;
+    color: #adb5bd !important;
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-time {
+    background: var(--bs-dark);
+    border-top-color: var(--bs-border-color-translucent);
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-time input {
+    background: var(--bs-body-bg);
+    border-color: var(--bs-border-color-translucent);
+    color: #e9ecef !important;
+  }
+
+  .flatpickr-calendar.hasTime .flatpickr-time {
+    border-top: var(--bs-border-color-translucent);
+  }
+
+  .flatpickr-next-month {
+    color: var(--bs-body-color);
+    fill: var(--bs-body-color);
+  }
+
+  span.flatpickr-weekday {
+    color: var(--bs-secondary-color);
+    font-weight: 600;
+    font-size: 0.75rem;
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-time input:focus {
+    border-color: var(--bs-primary);
+    background: var(--bs-body-bg);
+    color: #ffffff !important;
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-time .flatpickr-time-separator {
+    color: #e9ecef !important;
+  }
+  
+  /* Better focus states */
+  .flatpickr-day:focus {
+    outline: 2px solid var(--bs-primary);
+    outline-offset: -2px;
+    z-index: 10;
+  }
+  
+  /* Animation for calendar appearance */
+  .flatpickr-calendar.open {
+    animation: flatpickr-slideDown 0.2s ease-out;
+  }
+  
+  @keyframes flatpickr-slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-10px) scale(0.98);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+  
+  /* Small alert styling */
+  .alert-sm {
+    padding: 0.5rem;
+    font-size: 0.875rem;
+  }
+  
+  /* Responsive adjustments - hide on smaller screens */
+  @media (max-width: 991.98px) {
+    .floating-creation-filter {
+      display: none !important;
+    }
+  }
+  
+  /* Flatpickr positioning and responsive adjustments */
+  .flatpickr-calendar.arrowTop:before,
+  .flatpickr-calendar.arrowTop:after {
+    border-bottom-color: var(--bs-border-color);
+  }
+  
+  .flatpickr-calendar.arrowBottom:before,
+  .flatpickr-calendar.arrowBottom:after {
+    border-top-color: var(--bs-border-color);
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-calendar.arrowTop:before,
+  [data-bs-theme="dark"] .flatpickr-calendar.arrowTop:after {
+    border-bottom-color: var(--bs-border-color-translucent);
+  }
+  
+  [data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:before,
+  [data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:after {
+    border-top-color: var(--bs-border-color-translucent);
+  }
+  
+  /* Ensure calendar stays within viewport on mobile */
+  @media (max-width: 576px) {
+    .flatpickr-calendar {
+      max-width: calc(100vw - 20px);
+      font-size: 14px;
+    }
+    
+    .flatpickr-day {
+      height: 35px;
+      line-height: 35px;
+    }
+    
+    .flatpickr-time input {
+      font-size: 14px;
+    }
+  }
+  
+  /* Improved accessibility */
+  .flatpickr-calendar {
+    font-family: inherit;
+  }
+  
+  .flatpickr-day[aria-label] {
+    position: relative;
+  }
+  
+  /* Smooth scroll behavior for time inputs */
+  .flatpickr-time input {
+    scroll-behavior: smooth;
+  }
+  
+  /* Enhanced visual feedback for interactive elements */
+  .flatpickr-prev-month,
+  .flatpickr-next-month {
+    border-radius: 4px;
+    padding: 4px;
+    margin: 2px;
+  }
+  
+  .flatpickr-prev-month:hover,
+  .flatpickr-next-month:hover {
+    background: rgba(var(--bs-primary-rgb), 0.1);
+  }
+
+  /* Relationship count styling */
+  .relationship-count .badge {
+    min-width: 80px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .relationship-count .spinner-border-sm {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    // Initialize Flatpickr date range picker
+    const dateRangeInput = document.getElementById('floatingCreationFilterRange');
+    const startHidden = document.getElementById('creation_filter_start');
+    const endHidden = document.getElementById('creation_filter_end');
+    
+    if (dateRangeInput && typeof flatpickr !== 'undefined') {
+      console.log('Flatpickr library loaded, initializing date range picker');
+      // Store the Flatpickr instance in a variable accessible to all handlers
+      let fp;
+      
+      // Function to initialize Flatpickr
+      function initializeFlatpickr(theme) {
+        // Determine theme based on current document theme or passed parameter
+        const currentTheme = theme || (document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'light');
+        
+        const config = {
+          mode: 'range',
+          enableTime: true,
+          dateFormat: 'Y-m-d H:i',
+          time_24hr: true,
+          allowInput: false,
+          clickOpens: true,
+          theme: currentTheme,
+          animate: true,
+          position: 'auto',
+          static: false,
+          appendTo: document.body, // Ensure it renders above other elements
+          locale: {
+            rangeSeparator: ' to ',
+            weekdays: {
+              shorthand: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+              longhand: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+            },
+            months: {
+              shorthand: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+              longhand: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+            }
+          },
+          onOpen: function(selectedDates, dateStr, instance) {
+            // Add a slight delay to apply theme-specific styling after calendar opens
+            setTimeout(() => {
+              const calendar = instance.calendarContainer;
+              if (calendar) {
+                // Apply theme-specific class for additional styling control
+                calendar.classList.add(`flatpickr-${currentTheme}`);
+                
+                // Ensure proper z-index for offcanvas overlay
+                calendar.style.zIndex = '1070';
+                
+                // Add elegant entrance animation
+                calendar.classList.add('open');
+              }
+            }, 10);
+          },
+          onClose: function(selectedDates, dateStr, instance) {
+            const calendar = instance.calendarContainer;
+            if (calendar) {
+              calendar.classList.remove('open');
+            }
+          },
+          onChange: function(selectedDates, dateStr, instance) {
+            console.log('Date range changed:', selectedDates);
+            
+            if (selectedDates.length === 2) {
+              // Format dates for hidden inputs (Rails expects ISO format)
+              startHidden.value = selectedDates[0].toISOString().slice(0, 16);
+              endHidden.value = selectedDates[1].toISOString().slice(0, 16);
+              
+              // Update display with elegant formatting
+              const formatOptions = {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: false
+              };
+              
+              const startFormatted = selectedDates[0].toLocaleDateString('en-US', formatOptions);
+              const endFormatted = selectedDates[1].toLocaleDateString('en-US', formatOptions);
+              dateRangeInput.value = `${startFormatted} to ${endFormatted}`;
+              
+            } else if (selectedDates.length === 1) {
+              startHidden.value = selectedDates[0].toISOString().slice(0, 16);
+              endHidden.value = '';
+              
+              const formatOptions = {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: false
+              };
+              
+              const startFormatted = selectedDates[0].toLocaleDateString('en-US', formatOptions);
+              dateRangeInput.value = `${startFormatted} (select end date)`;
+              
+            } else {
+              startHidden.value = '';
+              endHidden.value = '';
+              dateRangeInput.value = '';
+            }
+          }
+        };
+        
+        return flatpickr(dateRangeInput, config);
+      }
+      
+      // Initialize date range picker
+      fp = initializeFlatpickr();
+      
+      // Set initial values if they exist
+      if (startHidden.value || endHidden.value) {
+        const dates = [];
+        if (startHidden.value) {
+          dates.push(new Date(startHidden.value));
+        }
+        if (endHidden.value) {
+          dates.push(new Date(endHidden.value));
+        }
+        fp.setDate(dates);
+      }
+      
+      // Preset button functionality
+      const presetButtons = document.querySelectorAll('.preset-btn');
+      presetButtons.forEach(button => {
+        button.addEventListener('click', function(event) {
+          event.preventDefault(); // Prevent any form submission
+          
+          const preset = this.getAttribute('data-preset');
+          const now = new Date();
+          let startDate, endDate;
+          
+          console.log('Preset button clicked:', preset); // Debug log
+          
+          switch (preset) {
+            case 'lastminute':
+              startDate = new Date(now);
+              startDate.setMinutes(startDate.getMinutes() - 1);
+              endDate = new Date(now);
+              break;
+            case 'last5minutes':
+              startDate = new Date(now);
+              startDate.setMinutes(startDate.getMinutes() - 5);
+              endDate = new Date(now);
+              break;
+            case 'today':
+              startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
+              endDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
+              break;
+            case 'yesterday':
+              const yesterday = new Date(now);
+              yesterday.setDate(yesterday.getDate() - 1);
+              startDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate(), 0, 0, 0);
+              endDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate(), 23, 59, 59);
+              break;
+            case 'last7days':
+              startDate = new Date(now);
+              startDate.setDate(startDate.getDate() - 7);
+              startDate.setHours(0, 0, 0, 0);
+              endDate = new Date(now);
+              endDate.setHours(23, 59, 59, 999);
+              break;
+            case 'last30days':
+              startDate = new Date(now);
+              startDate.setDate(startDate.getDate() - 30);
+              startDate.setHours(0, 0, 0, 0);
+              endDate = new Date(now);
+              endDate.setHours(23, 59, 59, 999);
+              break;
+            case 'thismonth':
+              startDate = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0);
+              endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
+              break;
+          }
+          
+          if (startDate && endDate && fp) {
+            console.log('Setting dates:', startDate, endDate); // Debug log
+            fp.setDate([startDate, endDate]);
+            
+            // Also update the hidden inputs directly as a fallback
+            startHidden.value = startDate.toISOString().slice(0, 16);
+            endHidden.value = endDate.toISOString().slice(0, 16);
+            
+            // Update the display value
+            const formattedStart = startDate.toLocaleDateString() + ' ' + startDate.toLocaleTimeString();
+            const formattedEnd = endDate.toLocaleDateString() + ' ' + endDate.toLocaleTimeString();
+            dateRangeInput.value = formattedStart + ' to ' + formattedEnd;
+          } else {
+            console.error('Failed to set dates - startDate:', startDate, 'endDate:', endDate, 'fp:', fp);
+          }
+        });
+      });
+      
+      // Listen for theme changes and update Flatpickr theme
+      document.addEventListener('dbviewerThemeChanged', function(e) {
+        const newTheme = e.detail.theme === 'dark' ? 'dark' : 'light';
+        console.log('Theme changed to:', newTheme);
+        
+        // Destroy and recreate with new theme
+        if (fp) {
+          const currentDates = fp.selectedDates;
+          fp.destroy();
+          fp = initializeFlatpickr(newTheme);
+          
+          // Restore previous values if they existed
+          if (currentDates && currentDates.length > 0) {
+            fp.setDate(currentDates);
+          }
+        }
+      });
+      
+      // Also listen for direct data-bs-theme attribute changes using MutationObserver
+      const themeObserver = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'data-bs-theme') {
+            const newTheme = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'light';
+            console.log('Theme attribute changed to:', newTheme);
+            
+            if (fp) {
+              const currentDates = fp.selectedDates;
+              fp.destroy();
+              fp = initializeFlatpickr(newTheme);
+              
+              // Restore previous values if they existed
+              if (currentDates && currentDates.length > 0) {
+                fp.setDate(currentDates);
+              }
+            }
+          }
+        });
+      });
+      
+      // Start observing theme changes
+      themeObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-bs-theme']
+      });
+    } else {
+      console.error('Date range picker initialization failed:', {
+        dateRangeInput: !!dateRangeInput,
+        flatpickr: typeof flatpickr !== 'undefined'
+      });
+    }
+    
+    // Close offcanvas after form submission
+    const form = document.getElementById('floatingCreationFilterForm');
+    if (form) {
+      form.addEventListener('submit', function() {
+        const offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('creationFilterOffcanvas'));
+        if (offcanvas) {
+          setTimeout(() => {
+            offcanvas.hide();
+          }, 100);
+        }
+      });
+    }
+  });
+</script>
+<% end %>