rails_error_dashboard 0.1.1 → 0.1.3

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>

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

@@ -119,12 +119,12 @@
   <% 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 %>
+      <%= 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 +149,57 @@
           ], params[:severity]), 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>
 
@@ -408,4 +454,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>

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

@@ -0,0 +1,253 @@
+<div class="container-fluid py-4">
+  <!-- Page Header -->
+  <div class="d-flex justify-content-between align-items-center mb-4">
+    <h1 class="h3 mb-0">
+      <i class="bi bi-speedometer2 me-2"></i>
+      Dashboard Overview
+    </h1>
+    <div class="text-muted">
+      <small>
+        Last updated: <%= Time.current.strftime("%B %d, %Y %I:%M %p") %>
+      </small>
+    </div>
+  </div>
+
+  <!-- Key Metrics Cards (Mobile-first: stack on mobile, 3 columns on desktop) -->
+  <div class="row g-3 mb-4">
+    <!-- Error Rate Card -->
+    <div class="col-12 col-md-6 col-lg-4">
+      <div class="card stat-card h-100 <%= error_rate_border_class(@stats[:error_rate]) %>">
+        <div class="card-body text-center">
+          <div class="stat-label mb-2">ERROR RATE</div>
+          <div class="stat-value <%= error_rate_text_class(@stats[:error_rate]) %>">
+            <%= @stats[:error_rate] %>%
+          </div>
+          <small class="text-muted">Errors per hour today</small>
+        </div>
+      </div>
+    </div>
+
+    <!-- Affected Users Card -->
+    <div class="col-12 col-md-6 col-lg-4">
+      <div class="card stat-card h-100">
+        <div class="card-body text-center">
+          <div class="stat-label mb-2">AFFECTED USERS</div>
+          <div class="stat-value text-primary">
+            <%= @stats[:affected_users_today] %>
+          </div>
+          <small class="<%= trend_color_class(@stats[:affected_users_change]) %>">
+            <%= trend_arrow(@stats[:affected_users_change]) %>
+            <%= @stats[:affected_users_change].abs %>
+            from yesterday
+          </small>
+        </div>
+      </div>
+    </div>
+
+    <!-- Trend Card -->
+    <div class="col-12 col-lg-4">
+      <div class="card stat-card h-100">
+        <div class="card-body text-center">
+          <div class="stat-label mb-2">ERROR TREND</div>
+          <div class="stat-value <%= trend_color_class(@stats[:trend_percentage]) %>">
+            <%= trend_arrow(@stats[:trend_percentage]) %>
+            <%= @stats[:trend_percentage].abs %>%
+          </div>
+          <small class="text-muted">
+            <%= trend_text(@stats[:trend_direction]) %>
+          </small>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Top 5 Errors by Impact (Mobile: stack, Desktop: 2 columns) -->
+  <% if @stats[:top_errors_by_impact].any? %>
+    <div class="card mb-4">
+      <div class="card-header bg-white d-flex justify-content-between align-items-center">
+        <h5 class="mb-0">
+          <i class="bi bi-exclamation-triangle me-2"></i>
+          Top 5 Errors by Impact
+        </h5>
+        <%= link_to "View All Errors →", errors_path, class: "btn btn-sm btn-outline-primary" %>
+      </div>
+      <div class="card-body">
+        <div class="row g-3">
+          <% @stats[:top_errors_by_impact].each do |error| %>
+            <div class="col-12 col-lg-6">
+              <%= link_to error_path(error[:id]), class: "text-decoration-none" do %>
+                <div class="card h-100 border-start border-<%= severity_color(error[:severity]) %> border-3">
+                  <div class="card-body">
+                    <div class="d-flex justify-content-between align-items-start mb-2">
+                      <div class="flex-grow-1">
+                        <h6 class="mb-1">
+                          <span class="badge bg-<%= severity_color(error[:severity]) %> me-2">
+                            <%= severity_icon(error[:severity]) %> <%= error[:severity].to_s.titleize %>
+                          </span>
+                          <code class="small"><%= error[:error_type] %></code>
+                        </h6>
+                        <p class="small text-muted mb-2"><%= error[:message] %></p>
+                      </div>
+                    </div>
+                    <div class="d-flex justify-content-between align-items-center small">
+                      <span class="text-muted">
+                        <i class="bi bi-people-fill me-1"></i>
+                        <%= error[:affected_users] %> user<%= error[:affected_users] != 1 ? 's' : '' %>
+                      </span>
+                      <span class="text-muted">
+                        <i class="bi bi-arrow-repeat me-1"></i>
+                        <%= error[:occurrence_count] %> occurrence<%= error[:occurrence_count] != 1 ? 's' : '' %>
+                      </span>
+                      <span class="fw-bold text-danger">
+                        Impact: <%= error[:impact_score] %>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
+  <!-- Platform Health Summary (Mobile: stack, Desktop: 3 columns) -->
+  <% if @platform_health.any? %>
+    <div class="card mb-4">
+      <div class="card-header bg-white d-flex justify-content-between align-items-center">
+        <h5 class="mb-0">
+          <i class="bi bi-phone me-2"></i>
+          Platform Health
+        </h5>
+        <% if RailsErrorDashboard.configuration.enable_platform_comparison %>
+          <%= link_to "Full Comparison →", platform_comparison_errors_path, class: "btn btn-sm btn-outline-primary" %>
+        <% end %>
+      </div>
+      <div class="card-body">
+        <div class="row g-3">
+          <% @platform_health.each do |platform, health| %>
+            <div class="col-12 col-md-4">
+              <div class="card h-100 border-<%= health_status_color(health[:health_status]) %>">
+                <div class="card-body">
+                  <div class="d-flex justify-content-between align-items-start mb-3">
+                    <h6 class="text-capitalize mb-0"><%= platform %></h6>
+                    <span class="badge bg-<%= health_status_color(health[:health_status]) %>">
+                      <%= health_status_text(health[:health_status]) %>
+                    </span>
+                  </div>
+
+                  <div class="mb-2">
+                    <small class="text-muted">Stability Score</small>
+                    <div class="d-flex align-items-center">
+                      <h4 class="mb-0 me-2"><%= health[:stability_score] %>/100</h4>
+                      <div class="progress flex-grow-1" style="height: 8px;">
+                        <div class="progress-bar bg-<%= health_status_color(health[:health_status]) %>"
+                             role="progressbar"
+                             style="width: <%= health[:stability_score] %>%">
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="small">
+                    <div class="d-flex justify-content-between mb-1">
+                      <span class="text-muted">Total Errors:</span>
+                      <strong><%= health[:total_errors] %></strong>
+                    </div>
+                    <div class="d-flex justify-content-between mb-1">
+                      <span class="text-muted">Critical:</span>
+                      <strong class="text-danger"><%= health[:critical_errors] %></strong>
+                    </div>
+                    <div class="d-flex justify-content-between">
+                      <span class="text-muted">Unresolved:</span>
+                      <strong><%= health[:unresolved_errors] %></strong>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
+  <!-- Critical Alerts (Last hour) -->
+  <% if @critical_alerts.any? %>
+    <div class="alert alert-danger border-danger mb-4" role="alert">
+      <div class="d-flex align-items-center mb-2">
+        <i class="bi bi-exclamation-triangle-fill fs-3 me-3"></i>
+        <div>
+          <h5 class="alert-heading mb-0">
+            🚨 <%= @critical_alerts.count %> Critical/High Error<%= @critical_alerts.count != 1 ? 's' : '' %> in Last Hour
+          </h5>
+        </div>
+      </div>
+      <div class="list-group list-group-flush">
+        <% @critical_alerts.first(5).each do |error| %>
+          <%= link_to error_path(error), class: "list-group-item list-group-item-action" do %>
+            <div class="d-flex justify-content-between align-items-start">
+              <div class="flex-grow-1">
+                <div class="d-flex align-items-center mb-1">
+                  <span class="badge bg-<%= severity_color(error.severity) %> me-2">
+                    <%= severity_icon(error.severity) %>
+                  </span>
+                  <code class="small"><%= error.error_type %></code>
+                </div>
+                <p class="mb-1 small"><%= error.message&.truncate(100) %></p>
+                <small class="text-muted">
+                  <i class="bi bi-clock me-1"></i>
+                  <%= time_ago_in_words(error.occurred_at) %> ago
+                  •
+                  <i class="bi bi-arrow-repeat me-1"></i>
+                  <%= error.occurrence_count %> occurrence<%= error.occurrence_count != 1 ? 's' : '' %>
+                </small>
+              </div>
+              <i class="bi bi-chevron-right"></i>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+      <% if @critical_alerts.count > 5 %>
+        <div class="mt-2">
+          <%= link_to "View all #{@critical_alerts.count} critical errors →",
+                     errors_path(severity: 'critical'),
+                     class: "btn btn-sm btn-outline-danger" %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+
+  <!-- Quick Actions -->
+  <div class="row g-3">
+    <div class="col-12 col-md-6 col-lg-3">
+      <%= link_to errors_path, class: "btn btn-lg btn-outline-primary w-100" do %>
+        <i class="bi bi-list-ul d-block fs-3 mb-2"></i>
+        View All Errors
+      <% end %>
+    </div>
+    <div class="col-12 col-md-6 col-lg-3">
+      <%= link_to analytics_errors_path, class: "btn btn-lg btn-outline-primary w-100" do %>
+        <i class="bi bi-graph-up d-block fs-3 mb-2"></i>
+        Analytics
+      <% end %>
+    </div>
+    <% if RailsErrorDashboard.configuration.enable_platform_comparison %>
+      <div class="col-12 col-md-6 col-lg-3">
+        <%= link_to platform_comparison_errors_path, class: "btn btn-lg btn-outline-primary w-100" do %>
+          <i class="bi bi-phone d-block fs-3 mb-2"></i>
+          Platform Health
+        <% end %>
+      </div>
+    <% end %>
+    <% if RailsErrorDashboard.configuration.enable_error_correlation %>
+      <div class="col-12 col-md-6 col-lg-3">
+        <%= link_to correlation_errors_path, class: "btn btn-lg btn-outline-primary w-100" do %>
+          <i class="bi bi-diagram-3 d-block fs-3 mb-2"></i>
+          Correlation
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -290,8 +290,16 @@
         datasets: [{
           label: 'Total Errors',
           data: <%= raw @error_rate_by_platform.values.to_json %>,
-          backgroundColor: 'rgba(54, 162, 235, 0.5)',
-          borderColor: 'rgba(54, 162, 235, 1)',
+          backgroundColor: (function() {
+            const isDark = document.body.classList.contains('dark-mode');
+            const config = getCatppuccinChartConfig(isDark);
+            return config.colors.blue.replace('rgb', 'rgba').replace(')', ', 0.5)');
+          })(),
+          borderColor: (function() {
+            const isDark = document.body.classList.contains('dark-mode');
+            const config = getCatppuccinChartConfig(isDark);
+            return config.colors.blue;
+          })(),
           borderWidth: 1
         }]
       },
@@ -311,29 +319,24 @@
   // Daily Trend Chart
   const dailyTrendCtx = document.getElementById('dailyTrendChart');
   if (dailyTrendCtx) {
-    const colors = {
-      ios: 'rgba(255, 99, 132, 1)',
-      android: 'rgba(75, 192, 192, 1)',
-      api: 'rgba(255, 206, 86, 1)',
-      web: 'rgba(153, 102, 255, 1)',
-      unknown: 'rgba(201, 203, 207, 1)'
-    };
+    // Use Catppuccin colors from global theme config
+    const isDark = document.body.classList.contains('dark-mode');
 
     const datasets = <%= raw @daily_trends.map { |platform, data|
       {
         label: platform.to_s.capitalize,
         data: data.values,
-        borderColor: "colors['#{platform}'] || 'rgba(75, 192, 192, 1)'",
-        backgroundColor: "colors['#{platform}'] ? colors['#{platform}'].replace('1)', '0.1)') : 'rgba(75, 192, 192, 0.1)'",
-        tension: 0.1
+        platform: platform.to_s.downcase,
+        tension: 0.4
       }
     }.to_json %>;
 
-    // Replace string placeholders with actual colors
+    // Apply Catppuccin platform colors
     datasets.forEach(ds => {
-      const platform = ds.label.toLowerCase();
-      ds.borderColor = colors[platform] || 'rgba(75, 192, 192, 1)';
-      ds.backgroundColor = colors[platform] ? colors[platform].replace('1)', '0.1)') : 'rgba(75, 192, 192, 0.1)';
+      const color = getPlatformColor(ds.platform, isDark);
+      ds.borderColor = color;
+      // Add transparency for background
+      ds.backgroundColor = color.replace('rgb', 'rgba').replace(')', ', 0.1)');
     });
 
     new Chart(dailyTrendCtx, {
@@ -368,8 +371,16 @@
         datasets: [{
           label: 'Hours to Resolve',
           data: times,
-          backgroundColor: 'rgba(255, 159, 64, 0.5)',
-          borderColor: 'rgba(255, 159, 64, 1)',
+          backgroundColor: (function() {
+            const isDark = document.body.classList.contains('dark-mode');
+            const config = getCatppuccinChartConfig(isDark);
+            return config.colors.orange.replace('rgb', 'rgba').replace(')', ', 0.5)');
+          })(),
+          borderColor: (function() {
+            const isDark = document.body.classList.contains('dark-mode');
+            const config = getCatppuccinChartConfig(isDark);
+            return config.colors.orange;
+          })(),
           borderWidth: 1
         }]
       },