rails_error_dashboard 0.1.1 → 0.1.4

data/app/views/rails_error_dashboard/errors/analytics.html.erb

@@ -1,3 +1,35 @@
+<script>
+  // Dynamic chart colors based on theme
+  window.getChartColors = function() {
+    const isDark = document.body.classList.contains('dark-mode');
+    return {
+      textColor: isDark ? '#cdd6f4' : '#1f2937',
+      gridColor: isDark ? 'rgba(88, 91, 112, 0.2)' : 'rgba(0, 0, 0, 0.1)'
+    };
+  };
+
+  window.getChartLibraryOptions = function() {
+    const colors = window.getChartColors();
+    return {
+      scales: {
+        x: {
+          ticks: { color: colors.textColor },
+          title: { color: colors.textColor },
+          grid: { color: colors.gridColor }
+        },
+        y: {
+          ticks: { color: colors.textColor },
+          title: { color: colors.textColor },
+          grid: { color: colors.gridColor }
+        }
+      },
+      plugins: {
+        legend: { labels: { color: colors.textColor } }
+      }
+    };
+  };
+</script>
+
 <div class="py-4">
   <div class="d-flex justify-content-between align-items-center mb-4">
     <h2 class="mb-0"><i class="bi bi-graph-up text-primary"></i> Error Analytics</h2>
@@ -48,13 +80,37 @@
       <h5 class="mb-0"><i class="bi bi-graph-up"></i> Error Trend (Last <%= @days %> Days)</h5>
     </div>
     <div class="card-body">
-      <%= line_chart @errors_over_time,
-          color: "#8B5CF6",
-          curve: false,
-          points: true,
-          height: "300px",
-          xtitle: "Date",
-          ytitle: "Number of Errors" %>
+      <div id="errors-over-time-chart"></div>
+      <script>
+        document.addEventListener('DOMContentLoaded', function() {
+          const colors = window.getChartColors();
+          new Chartkick.LineChart("errors-over-time-chart", <%= raw @errors_over_time.to_json %>, {
+            color: "#8B5CF6",
+            curve: false,
+            points: true,
+            height: "300px",
+            xtitle: "Date",
+            ytitle: "Number of Errors",
+            library: {
+              scales: {
+                x: {
+                  ticks: { color: colors.textColor },
+                  title: { color: colors.textColor, display: true, text: 'Date' },
+                  grid: { color: colors.gridColor }
+                },
+                y: {
+                  ticks: { color: colors.textColor },
+                  title: { color: colors.textColor, display: true, text: 'Number of Errors' },
+                  grid: { color: colors.gridColor }
+                }
+              },
+              plugins: {
+                legend: { labels: { color: colors.textColor } }
+              }
+            }
+          });
+        });
+      </script>
     </div>
   </div>
 
@@ -69,11 +125,23 @@
             <h5 class="mb-0"><i class="bi bi-phone"></i> Errors by Platform</h5>
           </div>
           <div class="card-body">
-            <%= pie_chart @errors_by_platform,
-                colors: ["#000000", "#3DDC84", "#3B82F6"],
-                height: "300px",
-                legend: "bottom",
-                donut: true %>
+            <div id="errors-by-platform-chart"></div>
+            <script>
+              document.addEventListener('DOMContentLoaded', function() {
+                const colors = window.getChartColors();
+                new Chartkick.PieChart("errors-by-platform-chart", <%= raw @errors_by_platform.to_json %>, {
+                  colors: ["#000000", "#3DDC84", "#3B82F6"],
+                  height: "300px",
+                  legend: "bottom",
+                  donut: true,
+                  library: {
+                    plugins: {
+                      legend: { labels: { color: colors.textColor } }
+                    }
+                  }
+                });
+              });
+            </script>
           </div>
         </div>
       </div>
@@ -88,11 +156,35 @@
           <h5 class="mb-0"><i class="bi bi-bug"></i> Top 10 Error Types</h5>
         </div>
         <div class="card-body">
-          <%= bar_chart @errors_by_type,
-              color: "#EF4444",
-              height: "400px",
-              xtitle: "Error Type",
-              ytitle: "Count" %>
+          <div id="errors-by-type-chart"></div>
+          <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              const colors = window.getChartColors();
+              new Chartkick.BarChart("errors-by-type-chart", <%= raw @errors_by_type.to_json %>, {
+                color: "#EF4444",
+                height: "400px",
+                xtitle: "Error Type",
+                ytitle: "Count",
+                library: {
+                  scales: {
+                    x: {
+                      ticks: { color: colors.textColor },
+                      title: { color: colors.textColor, display: true, text: 'Error Type' },
+                      grid: { color: colors.gridColor }
+                    },
+                    y: {
+                      ticks: { color: colors.textColor },
+                      title: { color: colors.textColor, display: true, text: 'Count' },
+                      grid: { color: colors.gridColor }
+                    }
+                  },
+                  plugins: {
+                    legend: { labels: { color: colors.textColor } }
+                  }
+                }
+              });
+            });
+          </script>
         </div>
       </div>
     </div>
@@ -106,11 +198,35 @@
           <h5 class="mb-0"><i class="bi bi-clock"></i> Errors by Hour of Day</h5>
         </div>
         <div class="card-body">
-          <%= column_chart @errors_by_hour,
-              color: "#8B5CF6",
-              height: "300px",
-              xtitle: "Hour",
-              ytitle: "Number of Errors" %>
+          <div id="errors-by-hour-chart"></div>
+          <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              const colors = window.getChartColors();
+              new Chartkick.ColumnChart("errors-by-hour-chart", <%= raw @errors_by_hour.to_json %>, {
+                color: "#8B5CF6",
+                height: "300px",
+                xtitle: "Hour",
+                ytitle: "Number of Errors",
+                library: {
+                  scales: {
+                    x: {
+                      ticks: { color: colors.textColor },
+                      title: { color: colors.textColor, display: true, text: 'Hour' },
+                      grid: { color: colors.gridColor }
+                    },
+                    y: {
+                      ticks: { color: colors.textColor },
+                      title: { color: colors.textColor, display: true, text: 'Number of Errors' },
+                      grid: { color: colors.gridColor }
+                    }
+                  },
+                  plugins: {
+                    legend: { labels: { color: colors.textColor } }
+                  }
+                }
+              });
+            });
+          </script>
         </div>
       </div>
     </div>
@@ -214,4 +330,305 @@
       </div>
     </div>
   </div>
+
+  <!-- Recurring Issues Analysis -->
+  <div class="card mb-4">
+    <div class="card-header bg-white">
+      <h5 class="mb-0"><i class="bi bi-arrow-repeat"></i> Recurring Issues</h5>
+    </div>
+    <div class="card-body">
+      <% if @recurring_data[:high_frequency_errors].any? %>
+        <h6 class="text-muted mb-3">High Frequency Errors</h6>
+        <div class="table-responsive mb-4">
+          <table class="table table-sm">
+            <thead>
+              <tr>
+                <th>Error Type</th>
+                <th>Total Occurrences</th>
+                <th>Duration</th>
+                <th>First Seen</th>
+                <th>Last Seen</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              <% @recurring_data[:high_frequency_errors].first(10).each do |error| %>
+                <tr>
+                  <td><code class="small"><%= error[:error_type] %></code></td>
+                  <td><span class="badge bg-danger"><%= error[:total_occurrences] %></span></td>
+                  <td><%= error[:duration_days] %> days</td>
+                  <td><small class="text-muted"><%= error[:first_seen].strftime("%b %d, %Y") %></small></td>
+                  <td><small class="text-muted"><%= error[:last_seen].strftime("%b %d, %Y %H:%M") %></small></td>
+                  <td>
+                    <% if error[:still_active] %>
+                      <span class="badge bg-warning">Active</span>
+                    <% else %>
+                      <span class="badge bg-secondary">Inactive</span>
+                    <% end %>
+                  </td>
+                </tr>
+              <% end %>
+            </tbody>
+          </table>
+        </div>
+      <% else %>
+        <p class="text-muted">No high-frequency errors found in the last <%= @days %> days.</p>
+      <% end %>
+
+      <% if @recurring_data[:persistent_errors].any? %>
+        <h6 class="text-muted mb-3 mt-4">Persistent Unresolved Errors</h6>
+        <div class="alert alert-info">
+          <i class="bi bi-info-circle"></i> These errors have been unresolved for more than 7 days.
+        </div>
+        <div class="table-responsive">
+          <table class="table table-sm">
+            <thead>
+              <tr>
+                <th>Error Type</th>
+                <th>Message</th>
+                <th>Platform</th>
+                <th>Count</th>
+                <th>Age</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <% @recurring_data[:persistent_errors].first(10).each do |error| %>
+                <tr>
+                  <td><code class="small"><%= error[:error_type] %></code></td>
+                  <td class="text-muted small"><%= error[:message] %></td>
+                  <td><%= error[:platform] %></td>
+                  <td><span class="badge bg-secondary"><%= error[:occurrence_count] %>x</span></td>
+                  <td>
+                    <span class="badge bg-warning"><%= error[:age_days] %> days</span>
+                  </td>
+                  <td>
+                    <%= link_to "View", error_path(error[:id]), class: "btn btn-sm btn-outline-primary" %>
+                  </td>
+                </tr>
+              <% end %>
+            </tbody>
+          </table>
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Release Comparison Charts -->
+  <% if @errors_by_version.present? && @errors_by_version.count >= 2 %>
+    <div class="row g-4 mb-4">
+      <!-- Errors by Version Chart -->
+      <div class="col-md-8">
+        <div class="card">
+          <div class="card-header bg-white">
+            <h5 class="mb-0"><i class="bi bi-git"></i> Errors by Release Version</h5>
+          </div>
+          <div class="card-body">
+            <div id="errors-by-version-chart"></div>
+            <script>
+              document.addEventListener('DOMContentLoaded', function() {
+                const versionData = <%= raw @errors_by_version.transform_values { |v| v[:count] }.to_json %>;
+                const colors = window.getChartColors();
+
+                new Chartkick.ColumnChart("errors-by-version-chart", versionData, {
+                  colors: ["#8B5CF6", "#EF4444", "#F59E0B", "#10B981"],
+                  height: "300px",
+                  xtitle: "Version",
+                  ytitle: "Error Count",
+                  library: window.getChartLibraryOptions()
+                });
+              });
+            </script>
+          </div>
+        </div>
+      </div>
+
+      <!-- Release Comparison Card -->
+      <div class="col-md-4">
+        <div class="card">
+          <div class="card-header bg-white">
+            <h5 class="mb-0">Latest vs Previous</h5>
+          </div>
+          <div class="card-body">
+            <% if @release_comparison.present? %>
+              <div class="mb-3">
+                <small class="text-muted">Latest Version</small>
+                <h4><%= @release_comparison[:latest_version] %></h4>
+                <p class="mb-0">
+                  <span class="badge bg-danger"><%= @release_comparison[:latest_count] %> errors</span>
+                  <% if @release_comparison[:latest_critical] > 0 %>
+                    <span class="badge bg-dark ms-1"><%= @release_comparison[:latest_critical] %> critical</span>
+                  <% end %>
+                </p>
+              </div>
+              <div class="mb-3">
+                <small class="text-muted">Previous Version</small>
+                <h4><%= @release_comparison[:previous_version] %></h4>
+                <p class="mb-0">
+                  <span class="badge bg-secondary"><%= @release_comparison[:previous_count] %> errors</span>
+                  <% if @release_comparison[:previous_critical] > 0 %>
+                    <span class="badge bg-secondary ms-1"><%= @release_comparison[:previous_critical] %> critical</span>
+                  <% end %>
+                </p>
+              </div>
+              <hr>
+              <div>
+                <small class="text-muted">Change</small>
+                <h4 class="<%= @release_comparison[:change_percentage] > 0 ? 'text-danger' : 'text-success' %>">
+                  <%= @release_comparison[:change_percentage] > 0 ? '↑' : '↓' %>
+                  <%= @release_comparison[:change_percentage].abs %>%
+                </h4>
+              </div>
+            <% else %>
+              <p class="text-muted">Not enough release data for comparison.</p>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Problematic Releases Alert -->
+    <% if @problematic_releases.any? %>
+      <div class="alert alert-warning mb-4">
+        <h5 class="alert-heading"><i class="bi bi-exclamation-triangle"></i> Problematic Releases Detected</h5>
+        <p>The following releases have significantly higher error rates (&gt;2x average):</p>
+        <ul class="mb-0">
+          <% @problematic_releases.each do |release| %>
+            <li>
+              <strong><%= release[:version] %></strong>:
+              <%= release[:error_count] %> errors
+              (<%= release[:critical_count] %> critical,
+              +<%= release[:deviation_from_avg] %>% from average)
+            </li>
+          <% end %>
+        </ul>
+      </div>
+    <% end %>
+  <% end %>
+
+  <!-- MTTR (Mean Time to Resolution) -->
+  <% if @mttr_stats[:total_resolved] > 0 %>
+    <div class="card mb-4">
+      <div class="card-header bg-white">
+        <h5 class="mb-0"><i class="bi bi-clock-history"></i> Resolution Performance (MTTR)</h5>
+      </div>
+      <div class="card-body">
+        <div class="row g-3 mb-4">
+          <!-- Overall MTTR -->
+          <div class="col-md-3">
+            <div class="card border-info">
+              <div class="card-body text-center">
+                <small class="text-muted d-block">Overall MTTR</small>
+                <h3 class="text-info mb-0"><%= @mttr_stats[:overall_mttr] %>h</h3>
+                <small class="text-muted">Average resolution time</small>
+              </div>
+            </div>
+          </div>
+
+          <!-- Fastest -->
+          <div class="col-md-3">
+            <div class="card border-success">
+              <div class="card-body text-center">
+                <small class="text-muted d-block">Fastest</small>
+                <h3 class="text-success mb-0"><%= @mttr_stats[:fastest_resolution] || 0 %>m</h3>
+                <small class="text-muted">Best resolution time</small>
+              </div>
+            </div>
+          </div>
+
+          <!-- Slowest -->
+          <div class="col-md-3">
+            <div class="card border-danger">
+              <div class="card-body text-center">
+                <small class="text-muted d-block">Slowest</small>
+                <h3 class="text-danger mb-0"><%= @mttr_stats[:slowest_resolution] || 0 %>h</h3>
+                <small class="text-muted">Longest resolution time</small>
+              </div>
+            </div>
+          </div>
+
+          <!-- Total Resolved -->
+          <div class="col-md-3">
+            <div class="card border-secondary">
+              <div class="card-body text-center">
+                <small class="text-muted d-block">Total Resolved</small>
+                <h3 class="text-secondary mb-0"><%= @mttr_stats[:total_resolved] %></h3>
+                <small class="text-muted">In last <%= @days %> days</small>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- MTTR by Platform -->
+        <% if @mttr_by_platform.present? && @mttr_by_platform.any? %>
+          <div class="mt-4">
+            <h6 class="text-muted mb-3">MTTR by Platform</h6>
+            <div id="mttr-by-platform-chart"></div>
+            <script>
+              document.addEventListener('DOMContentLoaded', function() {
+                const colors = window.getChartColors();
+                new Chartkick.BarChart("mttr-by-platform-chart",
+                  <%= raw @mttr_by_platform.to_json %>, {
+                  suffix: " hours",
+                  height: "200px",
+                  colors: ["#8B5CF6"],
+                  library: window.getChartLibraryOptions()
+                });
+              });
+            </script>
+          </div>
+        <% end %>
+
+        <!-- MTTR by Severity -->
+        <% if @mttr_stats[:mttr_by_severity].present? && @mttr_stats[:mttr_by_severity].any? %>
+          <div class="mt-4">
+            <h6 class="text-muted mb-3">MTTR by Severity</h6>
+            <div class="table-responsive">
+              <table class="table table-sm">
+                <thead>
+                  <tr>
+                    <th>Severity</th>
+                    <th>Average Time to Resolution</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <% @mttr_stats[:mttr_by_severity].each do |severity, hours| %>
+                    <tr>
+                      <td>
+                        <span class="badge bg-<%= severity_color(severity) %>">
+                          <%= severity.to_s.capitalize %>
+                        </span>
+                      </td>
+                      <td><strong><%= hours %> hours</strong></td>
+                    </tr>
+                  <% end %>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        <% end %>
+
+        <!-- MTTR Trend -->
+        <% if @mttr_stats[:mttr_trend].present? && @mttr_stats[:mttr_trend].any? %>
+          <div class="mt-4">
+            <h6 class="text-muted mb-3">MTTR Trend (Weekly)</h6>
+            <div id="mttr-trend-chart"></div>
+            <script>
+              document.addEventListener('DOMContentLoaded', function() {
+                const colors = window.getChartColors();
+                new Chartkick.LineChart("mttr-trend-chart",
+                  <%= raw @mttr_stats[:mttr_trend].to_json %>, {
+                  suffix: " hours",
+                  height: "250px",
+                  colors: ["#10B981"],
+                  curve: false,
+                  library: window.getChartLibraryOptions()
+                });
+              });
+            </script>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
 </div>

data/app/views/rails_error_dashboard/errors/index.html.erb

@@ -1,5 +1,7 @@
-<!-- Subscribe to Turbo Stream updates -->
-<%= turbo_stream_from "error_list" %>
+<!-- Subscribe to Turbo Stream updates (only if ActionCable is available) -->
+<% if defined?(ActionCable) %>
+  <%= turbo_stream_from "error_list" %>
+<% end %>
 
 <div class="py-4">
   <div class="d-flex justify-content-between align-items-center mb-4">
@@ -119,12 +121,22 @@
   <% end %>
 
   <!-- Filters -->
-  <div class="card mb-4">
+  <div class="card mb-4" id="filters-section">
     <div class="card-header bg-white">
       <h5 class="mb-0">Filters & Search</h5>
     </div>
     <div class="card-body">
-      <%= form_with url: errors_path, method: :get, class: "row g-3" do %>
+      <!-- Quick Filter Buttons -->
+      <div class="d-flex gap-2 mb-3">
+        <%= link_to "All Errors", errors_path,
+            class: "btn btn-sm #{params[:assigned_to].blank? ? 'btn-primary' : 'btn-outline-primary'}" %>
+        <%= link_to "Unassigned", errors_path(assigned_to: '__unassigned__'),
+            class: "btn btn-sm #{params[:assigned_to] == '__unassigned__' ? 'btn-primary' : 'btn-outline-primary'}" %>
+        <%= link_to "My Errors", errors_path(assigned_to: current_user_name),
+            class: "btn btn-sm #{params[:assigned_to] == current_user_name ? 'btn-primary' : 'btn-outline-primary'}" %>
+      </div>
+
+      <%= form_with url: errors_path, method: :get, class: "row g-3", data: { turbo: false } do %>
         <div class="col-md-4">
           <%= text_field_tag :search, params[:search], placeholder: "Search errors...", class: "form-control" %>
         </div>
@@ -149,11 +161,82 @@
           ], params[:severity]), class: "form-select" %>
         </div>
 
+        <!-- Time Range Filter -->
+        <div class="col-md-2">
+          <%= select_tag :timeframe, options_for_select([
+            ['All Time', ''],
+            ['Last Hour', 'last_hour'],
+            ['Today', 'today'],
+            ['Yesterday', 'yesterday'],
+            ['Last 7 Days', 'last_7_days'],
+            ['Last 30 Days', 'last_30_days'],
+            ['Last 90 Days', 'last_90_days']
+          ], params[:timeframe]), class: "form-select" %>
+        </div>
+
+        <!-- Frequency Filter -->
+        <div class="col-md-2">
+          <%= select_tag :frequency, options_for_select([
+            ['All Frequencies', ''],
+            ['Once', 'once'],
+            ['2-9 Times', 'few'],
+            ['10-99 Times', 'frequent'],
+            ['100+ Times', 'very_frequent'],
+            ['Recurring (Active)', 'recurring']
+          ], params[:frequency]), class: "form-select" %>
+        </div>
+
+        <!-- Phase 3: Workflow Filters -->
+        <div class="col-md-2">
+          <%= select_tag :status, options_for_select([
+            ['All Statuses', ''],
+            ['🆕 New', 'new'],
+            ['🔵 In Progress', 'in_progress'],
+            ['🟡 Investigating', 'investigating'],
+            ['✅ Resolved', 'resolved'],
+            ['⚫ Won\'t Fix', 'wont_fix']
+          ], params[:status]), class: "form-select" %>
+        </div>
+
+        <div class="col-md-2">
+          <%= select_tag :assigned_to, options_for_select([
+            ['All Assignments', ''],
+            ['Unassigned', '__unassigned__'],
+            ['Assigned', '__assigned__']
+          ], params[:assigned_to]), class: "form-select" %>
+        </div>
+
+        <div class="col-md-2">
+          <%= select_tag :priority_level, options_for_select([
+            ['All Priorities', ''],
+            ['🔴 Critical (P3)', 3],
+            ['🟠 High (P2)', 2],
+            ['🟡 Medium (P1)', 1],
+            ['⚪ Low (P0)', 0]
+          ], params[:priority_level]), class: "form-select" %>
+        </div>
+
         <div class="col-auto">
           <div class="form-check mt-2">
-            <%= check_box_tag :unresolved, "true", params[:unresolved] != "false" && params[:unresolved] != "0", class: "form-check-input", data: { uncheck_value: "false" } %>
+            <%
+              # Determine checkbox state based on params
+              # If unresolved param is missing or nil, default to checked (true)
+              # If unresolved param is explicitly "false" or "0", uncheck it
+              is_checked = if params[:unresolved].nil?
+                true  # Default to checked when first loading
+              else
+                params[:unresolved] != "false" && params[:unresolved] != "0"
+              end
+            %>
+            <%= check_box_tag :unresolved, "1", is_checked, class: "form-check-input", id: "unresolved_checkbox" %>
             <%= label_tag :unresolved, "Unresolved only", class: "form-check-label" %>
-            <%= hidden_field_tag :unresolved, "false", id: nil %>
+          </div>
+        </div>
+
+        <div class="col-auto">
+          <div class="form-check mt-2">
+            <%= check_box_tag :hide_snoozed, "1", params[:hide_snoozed] == "1", class: "form-check-input" %>
+            <%= label_tag :hide_snoozed, "Hide snoozed", class: "form-check-label" %>
           </div>
         </div>
 
@@ -207,13 +290,13 @@
                 <th style="width: 40px;">
                   <input type="checkbox" id="select-all" class="form-check-input">
                 </th>
-                <th>Severity</th>
-                <th>Error Type</th>
+                <th><%= sortable_header("Severity", "severity") %></th>
+                <th><%= sortable_header("Error Type", "error_type") %></th>
                 <th>Message</th>
-                <th>Occurrences</th>
-                <th>First / Last Seen</th>
+                <th><%= sortable_header("Occurrences", "occurrence_count") %></th>
+                <th><%= sortable_header("First / Last Seen", "last_seen_at") %></th>
                 <% if @platforms.size > 1 %>
-                  <th>Platform</th>
+                  <th><%= sortable_header("Platform", "platform") %></th>
                 <% end %>
                 <th>Status</th>
                 <th></th>
@@ -408,4 +491,37 @@
             '? - Show this help');
     }
   });
+
+  // Preserve scroll position on page load
+  document.addEventListener('DOMContentLoaded', function() {
+    const scrollPos = sessionStorage.getItem('scrollPos');
+    if (scrollPos) {
+      window.scrollTo(0, parseInt(scrollPos));
+      sessionStorage.removeItem('scrollPos');
+    }
+  });
+
+  // Handle filter form submission
+  document.addEventListener('DOMContentLoaded', function() {
+    const filterForm = document.querySelector('form[action="<%= errors_path %>"]');
+    if (filterForm) {
+      filterForm.addEventListener('submit', function(e) {
+        // Save scroll position before form submission
+        sessionStorage.setItem('scrollPos', window.pageYOffset);
+
+        // Handle unchecked checkbox - when unchecked, send "0" explicitly
+        const unresolvedCheckbox = document.getElementById('unresolved_checkbox');
+        if (unresolvedCheckbox && !unresolvedCheckbox.checked) {
+          // Create hidden input to send "0" when unchecked
+          const hiddenInput = document.createElement('input');
+          hiddenInput.type = 'hidden';
+          hiddenInput.name = 'unresolved';
+          hiddenInput.value = '0';
+          filterForm.appendChild(hiddenInput);
+          // Remove the checkbox from form submission to avoid sending empty value
+          unresolvedCheckbox.disabled = true;
+        }
+      });
+    }
+  });
 </script>