rails_error_dashboard 0.1.28 → 0.1.30

data/app/views/layouts/rails_error_dashboard.html.erb

@@ -20,795 +20,14 @@
     <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chartkick@5.0.1/dist/chartkick.min.js"></script>
 
-    <!-- Catppuccin Mocha Theme - Pure CSS -->
-    <style>
-      /* Catppuccin Mocha Color Palette */
-      :root {
-        --ctp-rosewater: #f5e0dc;
-        --ctp-flamingo: #f2cdcd;
-        --ctp-pink: #f5c2e7;
-        --ctp-mauve: #cba6f7;
-        --ctp-red: #f38ba8;
-        --ctp-maroon: #eba0ac;
-        --ctp-peach: #fab387;
-        --ctp-yellow: #f9e2af;
-        --ctp-green: #a6e3a1;
-        --ctp-teal: #94e2d5;
-        --ctp-sky: #89dceb;
-        --ctp-sapphire: #74c7ec;
-        --ctp-blue: #89b4fa;
-        --ctp-lavender: #b4befe;
-        --ctp-text: #cdd6f4;
-        --ctp-subtext1: #bac2de;
-        --ctp-subtext0: #a6adc8;
-        --ctp-overlay2: #9399b2;
-        --ctp-overlay1: #7f849c;
-        --ctp-overlay0: #6c7086;
-        --ctp-surface2: #585b70;
-        --ctp-surface1: #45475a;
-        --ctp-surface0: #313244;
-        --ctp-base: #1e1e2e;
-        --ctp-mantle: #181825;
-        --ctp-crust: #11111b;
-      }
-
-      /* Light Theme (Default) */
-      body {
-        background-color: #f3f4f6;
-        color: #1f2937;
-        transition: background-color 0.3s, color 0.3s;
-      }
-
-      /* Dark Theme */
-      body.dark-mode {
-        background-color: var(--ctp-base);
-        color: var(--ctp-text);
-      }
-
-      /* Navbar */
-      .navbar {
-        background: linear-gradient(135deg, #8B5CF6, #6D28D9) !important;
-        color: white !important;
-      }
-      .navbar * {
-        color: white !important;
-      }
-      .navbar-brand {
-        font-weight: bold;
-      }
-
-      /* Theme Toggle Button */
-      .theme-toggle {
-        cursor: pointer;
-        padding: 0.5rem 1rem;
-        border-radius: 0.5rem;
-        background-color: rgba(255, 255, 255, 0.1);
-        color: white;
-        border: none;
-        transition: background-color 0.2s;
-      }
-      .theme-toggle:hover {
-        background-color: rgba(255, 255, 255, 0.2);
-      }
-
-      /* App Switcher Button - must override navbar * rule */
-      .app-switcher-btn {
-        background-color: rgba(255, 255, 255, 0.1) !important;
-        color: white !important;
-        border: 1px solid rgba(255, 255, 255, 0.3) !important;
-        transition: background-color 0.2s;
-      }
-      .app-switcher-btn:hover {
-        background-color: rgba(255, 255, 255, 0.2) !important;
-      }
-      .app-switcher-btn i,
-      .app-switcher-btn * {
-        color: white !important;
-      }
-
-      /* Sidebar */
-      .sidebar {
-        background: white;
-        min-height: calc(100vh - 56px);
-        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
-      }
-      body.dark-mode .sidebar {
-        background: var(--ctp-mantle);
-      }
-      .sidebar .nav-link {
-        color: #1f2937;
-        padding: 0.75rem 1.5rem;
-        border-left: 3px solid transparent;
-        transition: all 0.2s;
-      }
-      body.dark-mode .sidebar .nav-link {
-        color: var(--ctp-text);
-      }
-      .sidebar .nav-link:hover {
-        background-color: #f3f4f6;
-        color: #8B5CF6;
-        border-left-color: #8B5CF6;
-      }
-      body.dark-mode .sidebar .nav-link:hover {
-        background-color: var(--ctp-surface0);
-        color: var(--ctp-mauve);
-        border-left-color: var(--ctp-mauve);
-      }
-      .sidebar .nav-link.active {
-        background-color: #f3f4f6;
-        color: #8B5CF6;
-        border-left-color: #8B5CF6;
-        font-weight: 600;
-      }
-      body.dark-mode .sidebar .nav-link.active {
-        background-color: var(--ctp-surface0);
-        color: var(--ctp-mauve);
-        border-left-color: var(--ctp-mauve);
-      }
-
-      /* Cards */
-      .card {
-        background: white;
-        border: 1px solid #e5e7eb;
-        transition: background-color 0.3s, border-color 0.3s;
-      }
-      body.dark-mode .card {
-        background: var(--ctp-surface0);
-        border-color: var(--ctp-surface2);
-        color: var(--ctp-text);
-      }
-      body.dark-mode .card-header {
-        background-color: var(--ctp-surface1);
-        border-color: var(--ctp-surface2);
-        color: var(--ctp-text);
-      }
-
-      /* Tables */
-      body.dark-mode .table {
-        color: var(--ctp-text);
-      }
-      body.dark-mode .table-hover tbody tr:hover {
-        background-color: var(--ctp-surface1);
-      }
-
-      /* Sticky table header for error list */
-      .table-responsive thead th {
-        position: sticky;
-        top: 0;
-        z-index: 10;
-        background-color: #f8f9fa;
-      }
-      body.dark-mode .table-responsive thead th {
-        background-color: var(--ctp-mantle);
-      }
-
-      /* Badges - Platform Colors */
-      .badge-ios {
-        background-color: #000;
-        color: white;
-      }
-      body.dark-mode .badge-ios {
-        background-color: var(--ctp-overlay0);
-        color: var(--ctp-text);
-        border: 1px solid var(--ctp-surface2);
-      }
-      .badge-android {
-        background-color: #3DDC84;
-        color: white;
-      }
-      body.dark-mode .badge-android {
-        background-color: rgba(166, 227, 161, 0.2);
-        color: var(--ctp-green);
-        border: 1px solid var(--ctp-green);
-      }
-      .badge-web {
-        background-color: #3B82F6;
-        color: white;
-      }
-      body.dark-mode .badge-web {
-        background-color: rgba(137, 180, 250, 0.2);
-        color: var(--ctp-blue);
-        border: 1px solid var(--ctp-blue);
-      }
-      .badge-api {
-        background-color: #8B5CF6;
-        color: white;
-      }
-      body.dark-mode .badge-api {
-        background-color: rgba(116, 199, 236, 0.2);
-        color: var(--ctp-sapphire);
-        border: 1px solid var(--ctp-sapphire);
-      }
-
-      /* Forms */
-      body.dark-mode .form-control,
-      body.dark-mode .form-select {
-        background-color: var(--ctp-surface0);
-        border-color: var(--ctp-surface2);
-        color: var(--ctp-text);
-      }
-      body.dark-mode .form-control:focus,
-      body.dark-mode .form-select:focus {
-        background-color: var(--ctp-surface1);
-        border-color: var(--ctp-mauve);
-        color: var(--ctp-text);
-      }
-
-      /* Code Blocks */
-      .code-block,
-      pre,
-      code {
-        background-color: #f9fafb;
-        color: #1f2937;
-      }
-      body.dark-mode .code-block,
-      body.dark-mode pre,
-      body.dark-mode code {
-        background-color: var(--ctp-mantle) !important;
-        color: var(--ctp-text) !important;
-      }
-
-      /* Alerts */
-      body.dark-mode .alert {
-        background-color: var(--ctp-surface0);
-        border-color: var(--ctp-surface2);
-        color: var(--ctp-text);
-      }
-
-      /* Text colors */
-      body.dark-mode .text-muted {
-        color: var(--ctp-subtext0) !important;
-      }
-      body.dark-mode .text-primary {
-        color: var(--ctp-mauve) !important;
-      }
-      body.dark-mode .text-danger {
-        color: var(--ctp-red) !important;
-      }
-      body.dark-mode .text-success {
-        color: var(--ctp-green) !important;
-      }
-      body.dark-mode .text-warning {
-        color: var(--ctp-peach) !important;
-      }
-
-      /* Override Bootstrap bg-white and bg-light */
-      body.dark-mode .bg-white {
-        background-color: var(--ctp-surface0) !important;
-      }
-      body.dark-mode .bg-light {
-        background-color: var(--ctp-surface1) !important;
-        color: var(--ctp-text) !important;
-      }
-
-      /* Borders */
-      body.dark-mode .border {
-        border-color: var(--ctp-surface2) !important;
-      }
-      body.dark-mode .rounded {
-        border-color: var(--ctp-surface2) !important;
-      }
-
-      /* Quick Filters Sidebar Section */
-      .sidebar h6 {
-        font-size: 0.75rem;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        padding: 0.75rem 1.5rem;
-        margin: 0;
-        color: #6B7280;
-      }
-      body.dark-mode .sidebar h6 {
-        color: var(--ctp-subtext0);
-      }
-
-      /* Stat Cards */
-      .stat-card {
-        border-radius: 0.75rem;
-        transition: transform 0.2s, box-shadow 0.2s;
-      }
-      .stat-card:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-      }
-
-      /* Badges for severity */
-      .badge.bg-danger {
-        background-color: #EF4444 !important;
-      }
-      .badge.bg-warning {
-        background-color: #F59E0B !important;
-      }
-      .badge.bg-info {
-        background-color: #3B82F6 !important;
-      }
-      .badge.bg-secondary {
-        background-color: #6B7280 !important;
-      }
-      .badge.bg-success {
-        background-color: #10B981 !important;
-      }
-
-      body.dark-mode .badge.bg-danger {
-        background-color: var(--ctp-red) !important;
-        color: var(--ctp-base) !important;
-      }
-      body.dark-mode .badge.bg-warning {
-        background-color: var(--ctp-peach) !important;
-        color: var(--ctp-base) !important;
-      }
-      body.dark-mode .badge.bg-info {
-        background-color: var(--ctp-blue) !important;
-        color: var(--ctp-base) !important;
-      }
-      body.dark-mode .badge.bg-secondary {
-        background-color: var(--ctp-overlay1) !important;
-      }
-      body.dark-mode .badge.bg-success {
-        background-color: var(--ctp-green) !important;
-        color: var(--ctp-base) !important;
-      }
-
-      /* Links */
-      a {
-        color: #8B5CF6;
-        text-decoration: none;
-      }
-      a:hover {
-        color: #6D28D9;
-        text-decoration: underline;
-      }
-      body.dark-mode a {
-        color: var(--ctp-mauve);
-      }
-      body.dark-mode a:hover {
-        color: var(--ctp-pink);
-      }
-
-      /* Buttons */
-      body.dark-mode .btn-primary {
-        background-color: var(--ctp-mauve);
-        border-color: var(--ctp-mauve);
-        color: var(--ctp-base);
-      }
-      body.dark-mode .btn-primary:hover {
-        background-color: var(--ctp-pink);
-        border-color: var(--ctp-pink);
-      }
-      body.dark-mode .btn-outline-primary {
-        color: var(--ctp-mauve);
-        border-color: var(--ctp-mauve);
-      }
-      body.dark-mode .btn-outline-primary:hover {
-        background-color: var(--ctp-mauve);
-        color: var(--ctp-base);
-      }
-      body.dark-mode .btn-secondary,
-      body.dark-mode .btn-outline-secondary {
-        background-color: var(--ctp-surface1);
-        border-color: var(--ctp-surface2);
-        color: var(--ctp-text);
-      }
-
-      /* Modal dialogs */
-      body.dark-mode .modal-content {
-        background-color: var(--ctp-surface0);
-        color: var(--ctp-text);
-        border-color: var(--ctp-surface2);
-      }
-      body.dark-mode .modal-header {
-        background-color: var(--ctp-surface1);
-        border-bottom-color: var(--ctp-surface2);
-        color: var(--ctp-text);
-      }
-      body.dark-mode .modal-footer {
-        background-color: var(--ctp-surface1);
-        border-top-color: var(--ctp-surface2);
-      }
-      body.dark-mode .modal-title {
-        color: var(--ctp-text);
-      }
-      body.dark-mode .btn-close {
-        filter: invert(1);
-      }
-
-      /* Table headers - CRITICAL FIX */
-      body.dark-mode thead,
-      body.dark-mode thead th {
-        background-color: var(--ctp-surface1) !important;
-        color: var(--ctp-text) !important;
-        border-color: var(--ctp-surface2) !important;
-      }
-      body.dark-mode tbody tr {
-        border-color: var(--ctp-surface2) !important;
-        background-color: transparent !important;
-      }
-      body.dark-mode tbody td {
-        border-color: var(--ctp-surface2) !important;
-        background-color: transparent !important;
-        color: var(--ctp-text) !important;
-      }
-      body.dark-mode tbody th {
-        background-color: var(--ctp-surface0) !important;
-        color: var(--ctp-text) !important;
-        border-color: var(--ctp-surface2) !important;
-      }
-      body.dark-mode table {
-        color: var(--ctp-text) !important;
-      }
-
-      /* Chart canvas backgrounds */
-      body.dark-mode canvas {
-        background-color: transparent !important;
-      }
-
-      /* Chart labels and text */
-      body.dark-mode .chart-container text {
-        fill: var(--ctp-text) !important;
-      }
-
-      /* Form placeholders */
-      body.dark-mode .form-control::placeholder,
-      body.dark-mode .form-select::placeholder {
-        color: var(--ctp-overlay0);
-        opacity: 1;
-      }
-
-      /* Dropdown menus */
-      .dropdown-menu {
-        background-color: white;
-        border: 1px solid rgba(0, 0, 0, 0.15);
-      }
-      .dropdown-item {
-        color: #1f2937 !important;
-      }
-      .dropdown-item:hover,
-      .dropdown-item:focus {
-        background-color: #f3f4f6;
-        color: #8B5CF6 !important;
-      }
-      .dropdown-item.active {
-        background-color: #8B5CF6;
-        color: white !important;
-      }
-
-      body.dark-mode .dropdown-menu {
-        background-color: var(--ctp-surface0);
-        border-color: var(--ctp-surface2);
-      }
-      body.dark-mode .dropdown-item {
-        color: var(--ctp-text) !important;
-      }
-      body.dark-mode .dropdown-item:hover,
-      body.dark-mode .dropdown-item:focus {
-        background-color: var(--ctp-surface1);
-        color: var(--ctp-mauve) !important;
-      }
-      body.dark-mode .dropdown-item.active {
-        background-color: var(--ctp-mauve);
-        color: var(--ctp-base) !important;
-      }
-
-      /* Pagination */
-      body.dark-mode .pagination .page-link {
-        background-color: var(--ctp-surface0);
-        border-color: var(--ctp-surface2);
-        color: var(--ctp-text);
-      }
-      body.dark-mode .pagination .page-link:hover {
-        background-color: var(--ctp-surface1);
-        color: var(--ctp-mauve);
-      }
-      body.dark-mode .pagination .page-item.active .page-link {
-        background-color: var(--ctp-mauve);
-        border-color: var(--ctp-mauve);
-        color: var(--ctp-base);
-      }
-
-      /* Progress bars */
-      body.dark-mode .progress {
-        background-color: var(--ctp-surface1);
-      }
-      body.dark-mode .progress-bar {
-        background-color: var(--ctp-mauve);
-      }
-
-      /* Horizontal rules */
-      body.dark-mode hr {
-        border-color: var(--ctp-surface2);
-        opacity: 1;
-      }
-
-      /* List groups */
-      body.dark-mode .list-group-item {
-        background-color: var(--ctp-surface0);
-        border-color: var(--ctp-surface2);
-        color: var(--ctp-text);
-      }
-      body.dark-mode .list-group-item:hover {
-        background-color: var(--ctp-surface1);
-      }
-
-      /* Offcanvas (mobile menu) */
-      body.dark-mode .offcanvas {
-        background-color: var(--ctp-mantle);
-        color: var(--ctp-text);
-      }
-      body.dark-mode .offcanvas-header {
-        border-bottom-color: var(--ctp-surface2);
-      }
-
-      /* Small text and labels */
-      body.dark-mode small {
-        color: var(--ctp-subtext1) !important;
-      }
-      body.dark-mode label {
-        color: var(--ctp-text);
-      }
-
-      /* Breadcrumbs */
-      body.dark-mode .breadcrumb {
-        background-color: var(--ctp-surface0);
-      }
-      body.dark-mode .breadcrumb-item {
-        color: var(--ctp-text);
-      }
-      body.dark-mode .breadcrumb-item.active {
-        color: var(--ctp-subtext0);
-      }
-
-      /* Tooltips */
-      body.dark-mode .tooltip-inner {
-        background-color: var(--ctp-surface0);
-        color: var(--ctp-text);
-      }
-
-      /* Checkboxes and radios */
-      body.dark-mode .form-check-input {
-        background-color: var(--ctp-surface1);
-        border-color: var(--ctp-surface2);
-      }
-      body.dark-mode .form-check-input:checked {
-        background-color: var(--ctp-mauve);
-        border-color: var(--ctp-mauve);
-      }
-      body.dark-mode .form-check-label {
-        color: var(--ctp-text);
-      }
-
-      /* Nav tabs */
-      body.dark-mode .nav-tabs {
-        border-bottom-color: var(--ctp-surface2);
-      }
-      body.dark-mode .nav-tabs .nav-link {
-        color: var(--ctp-text);
-        background-color: transparent;
-        border-color: transparent;
-      }
-      body.dark-mode .nav-tabs .nav-link:hover {
-        border-color: var(--ctp-surface2);
-        background-color: var(--ctp-surface1);
-      }
-      body.dark-mode .nav-tabs .nav-link.active {
-        background-color: var(--ctp-surface0);
-        border-color: var(--ctp-surface2) var(--ctp-surface2) var(--ctp-surface0);
-        color: var(--ctp-mauve);
-      }
-
-      /* Collapsible sections - AGGRESSIVE */
-      body.dark-mode .accordion-item {
-        background-color: var(--ctp-surface0) !important;
-        border-color: var(--ctp-surface2) !important;
-      }
-      body.dark-mode .accordion-button {
-        background-color: var(--ctp-surface1) !important;
-        color: var(--ctp-text) !important;
-      }
-      body.dark-mode .accordion-button.bg-light {
-        background-color: var(--ctp-surface1) !important;
-      }
-      body.dark-mode .accordion-button:not(.collapsed) {
-        background-color: var(--ctp-surface0) !important;
-        color: var(--ctp-mauve) !important;
-      }
-      body.dark-mode .accordion-button::after {
-        filter: invert(1);
-      }
-      body.dark-mode .accordion-body {
-        background-color: var(--ctp-surface0) !important;
-        color: var(--ctp-text) !important;
-      }
-
-      /* Heatmap specific styling - AGGRESSIVE */
-      body.dark-mode .heatmap-cell {
-        border-color: var(--ctp-surface2) !important;
-        color: var(--ctp-text) !important;
-      }
-      body.dark-mode .heatmap-hour {
-        color: var(--ctp-sky) !important;
-        font-weight: 600 !important;
-        font-size: 0.75rem !important;
-      }
-      body.dark-mode .heatmap-count {
-        color: var(--ctp-peach) !important;
-        font-weight: 600 !important;
-      }
-      body.dark-mode .heatmap-count.text-white {
-        color: var(--ctp-text) !important;
-      }
-      body.dark-mode .heatmap-count.text-dark {
-        color: var(--ctp-peach) !important;
-      }
-      body.dark-mode .heatmap-grid {
-        background-color: var(--ctp-surface0);
-      }
-
-      /* Definition lists (dl, dt, dd) - used in Request Context */
-      body.dark-mode dl {
-        color: var(--ctp-text);
-      }
-      body.dark-mode dt {
-        color: var(--ctp-subtext1);
-        font-weight: 600;
-      }
-      body.dark-mode dd {
-        color: var(--ctp-text);
-        background-color: var(--ctp-surface0);
-      }
-
-      /* Override any remaining white backgrounds */
-      body.dark-mode div[style*="background-color: white"],
-      body.dark-mode div[style*="background-color: #fff"],
-      body.dark-mode div[style*="background-color:#fff"],
-      body.dark-mode div[style*="background: white"],
-      body.dark-mode div[style*="background: #fff"] {
-        background-color: var(--ctp-surface0) !important;
-      }
-
-      /* Chart.js specific fixes for axis labels */
-      body.dark-mode .chartjs-render-monitor {
-        background-color: transparent !important;
-      }
-
-      /* Make sure all headings are visible */
-      body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
-      body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
-        color: var(--ctp-text);
-      }
-
-      /* Stronger text colors for better visibility */
-      body.dark-mode .text-secondary {
-        color: var(--ctp-subtext1) !important;
-      }
-
-      /* SVG text elements (for charts) - MORE AGGRESSIVE */
-      body.dark-mode svg text {
-        fill: var(--ctp-text) !important;
-      }
-      body.dark-mode svg .domain,
-      body.dark-mode svg .tick line {
-        stroke: var(--ctp-surface2) !important;
-      }
-      body.dark-mode svg tspan {
-        fill: var(--ctp-text) !important;
-      }
-
-      /* Details/Summary (collapsible sections) */
-      body.dark-mode details {
-        background-color: var(--ctp-surface0) !important;
-        border-color: var(--ctp-surface2) !important;
-      }
-      body.dark-mode summary {
-        background-color: var(--ctp-surface0) !important;
-        color: var(--ctp-text) !important;
-        border-color: var(--ctp-surface2) !important;
-      }
-      body.dark-mode details[open] summary {
-        background-color: var(--ctp-surface1) !important;
-        border-bottom-color: var(--ctp-surface2) !important;
-      }
-
-      /* Button-like summary elements */
-      body.dark-mode .btn.collapsed,
-      body.dark-mode [data-bs-toggle="collapse"] {
-        background-color: var(--ctp-surface0) !important;
-        color: var(--ctp-text) !important;
-        border-color: var(--ctp-surface2) !important;
-      }
-
-      /* Specific override for white backgrounds in backtrace sections */
-      body.dark-mode .card .card-body > div[style*="background"],
-      body.dark-mode .card-body > button[style*="background"] {
-        background-color: var(--ctp-surface0) !important;
-      }
-
-      /* Error header/banner */
-      body.dark-mode .alert-danger {
-        background-color: rgba(243, 139, 168, 0.2) !important;
-        border-color: var(--ctp-red) !important;
-        color: var(--ctp-text) !important;
-      }
-
-      /* Chartkick specific - force text visibility */
-      body.dark-mode #chart-1 text,
-      body.dark-mode [id^="chart-"] text {
-        fill: var(--ctp-text) !important;
-        color: var(--ctp-text) !important;
-      }
-
-      /* Force all text in charts to be visible */
-      body.dark-mode canvas + div text,
-      body.dark-mode .chartjs-size-monitor text {
-        color: var(--ctp-text) !important;
-      }
-
-      /* ULTRA AGGRESSIVE - Chart.js axis labels and titles */
-      body.dark-mode canvas {
-        color: var(--ctp-text) !important;
-      }
-
-      /* Target Google Charts (alternative library) */
-      body.dark-mode svg > g > g > text,
-      body.dark-mode svg g text {
-        fill: var(--ctp-text) !important;
-        font-size: 12px !important;
-      }
-
-      /* Chart.js specific selectors - NUCLEAR OPTION */
-      body.dark-mode .chartjs-render-monitor + div text,
-      body.dark-mode [class*="chart"] text,
-      body.dark-mode div[id*="chart"] text {
-        fill: var(--ctp-text) !important;
-        color: var(--ctp-text) !important;
-      }
-
-      /* Ensure axis tick labels are visible */
-      body.dark-mode g.tick text,
-      body.dark-mode .tick text,
-      body.dark-mode text.highcharts-axis-title,
-      body.dark-mode .highcharts-axis-labels text {
-        fill: var(--ctp-text) !important;
-        color: var(--ctp-text) !important;
-      }
-
-      /* Force visibility on ALL text elements inside chart containers */
-      body.dark-mode .card-body text,
-      body.dark-mode .card text {
-        fill: var(--ctp-text) !important;
-      }
-
-      /* Toast notifications */
-      .toast {
-        min-width: 250px;
-      }
-      .toast-container {
-        max-width: 350px;
-      }
-
-      /* Filter pills */
-      .filter-pill {
-        display: inline-flex;
-        align-items: center;
-        padding: 0.5rem 0.75rem;
-        font-size: 0.875rem;
-        border-radius: 0.375rem;
-        transition: all 0.2s ease;
-      }
-      .filter-pill:hover {
-        opacity: 0.85;
-        transform: translateY(-1px);
-      }
-      .filter-pill .bi-x {
-        font-size: 1.1rem;
-        font-weight: bold;
-      }
-      body.dark-mode .filter-pill.bg-primary {
-        background-color: var(--ctp-mauve) !important;
-      }
-      body.dark-mode .filter-pill.bg-secondary {
-        background-color: var(--ctp-surface2) !important;
-      }
-    </style>
+    <!-- Syntax Highlighting for Source Code Viewer -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@catppuccin/highlightjs@1.0.0/css/catppuccin-mocha.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/styles.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
+
+    <!-- Dashboard CSS -->
+    <link rel="stylesheet" href="/rails_error_dashboard/css/dashboard.css">
   </head>
 
   <body>
@@ -821,9 +40,14 @@
     <nav class="navbar navbar-dark">
       <div class="container-fluid">
         <div class="d-flex align-items-center">
+          <!-- Mobile menu toggle -->
           <button class="btn btn-link text-white d-md-none me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu">
             <i class="bi bi-list fs-4"></i>
           </button>
+          <!-- Desktop sidebar toggle -->
+          <button class="btn btn-link text-white d-none d-md-block me-2" type="button" id="sidebarToggle" title="Toggle sidebar">
+            <i class="bi bi-layout-sidebar-inset fs-5"></i>
+          </button>
           <%
             # Check if main app has a root route defined
             begin
@@ -900,7 +124,7 @@
     <div class="container-fluid">
       <div class="row">
         <!-- Sidebar -->
-        <nav class="col-md-2 d-none d-md-block sidebar">
+        <nav class="col-md-2 d-none d-md-block sidebar" id="sidebar">
           <div class="position-sticky pt-3">
             <%
               # Preserve application_id across navigation
@@ -913,7 +137,7 @@
                 <% end %>
               </li>
               <li class="nav-item">
-                <%= link_to errors_path(nav_params), class: "nav-link #{request.path == errors_path ? 'active' : ''}" do %>
+                <%= link_to errors_path(nav_params), class: "nav-link #{(controller_name == 'errors' && action_name == 'index') ? 'active' : ''}" do %>
                   <i class="bi bi-list-ul"></i> All Errors
                 <% end %>
               </li>
@@ -922,6 +146,16 @@
                   <i class="bi bi-graph-up"></i> Analytics
                 <% end %>
               </li>
+              <li class="nav-item">
+                <%= link_to platform_comparison_errors_path(nav_params), class: "nav-link #{request.path == platform_comparison_errors_path ? 'active' : ''}" do %>
+                  <i class="bi bi-heart-pulse"></i> Platform Health
+                <% end %>
+              </li>
+              <li class="nav-item">
+                <%= link_to correlation_errors_path(nav_params), class: "nav-link #{request.path == correlation_errors_path ? 'active' : ''}" do %>
+                  <i class="bi bi-diagram-3"></i> Correlation
+                <% end %>
+              </li>
               <li class="nav-item">
                 <%= link_to settings_path(nav_params), class: "nav-link #{request.path == settings_path ? 'active' : ''}" do %>
                   <i class="bi bi-gear"></i> Settings
@@ -947,13 +181,28 @@
                 <% end %>
               </li>
               <li class="nav-item">
-                <%= link_to errors_path(nav_params.merge(platform: 'iOS')), class: "nav-link" do %>
-                  <i class="bi bi-phone"></i> iOS Errors
+                <%= link_to errors_path(nav_params.merge(platform: 'iOS')), class: "nav-link #{params[:platform] == 'iOS' ? 'active' : ''}" do %>
+                  <i class="bi bi-apple"></i> iOS Errors
+                <% end %>
+              </li>
+              <li class="nav-item">
+                <%= link_to errors_path(nav_params.merge(platform: 'Android')), class: "nav-link #{params[:platform] == 'Android' ? 'active' : ''}" do %>
+                  <i class="bi bi-android2"></i> Android Errors
+                <% end %>
+              </li>
+              <li class="nav-item">
+                <%= link_to errors_path(nav_params.merge(platform: 'Web')), class: "nav-link #{params[:platform] == 'Web' ? 'active' : ''}" do %>
+                  <i class="bi bi-globe"></i> Web Errors
+                <% end %>
+              </li>
+              <li class="nav-item">
+                <%= link_to errors_path(nav_params.merge(platform: 'API')), class: "nav-link #{params[:platform] == 'API' ? 'active' : ''}" do %>
+                  <i class="bi bi-server"></i> API Errors
                 <% end %>
               </li>
               <li class="nav-item">
-                <%= link_to errors_path(nav_params.merge(platform: 'Android')), class: "nav-link" do %>
-                  <i class="bi bi-phone"></i> Android Errors
+                <%= link_to errors_path(nav_params.merge(platform: 'Background Jobs')), class: "nav-link #{params[:platform] == 'Background Jobs' ? 'active' : ''}" do %>
+                  <i class="bi bi-gear-fill"></i> Background Jobs
                 <% end %>
               </li>
             </ul>
@@ -961,7 +210,7 @@
         </nav>
 
         <!-- Main content -->
-        <main class="col-md-10 ms-sm-auto px-md-4">
+        <main class="col-md-10 ms-sm-auto px-md-4" id="mainContent">
           <%= yield %>
         </main>
       </div>
@@ -991,6 +240,10 @@
                 <span><i class="bi bi-graph-up text-primary"></i> Go to analytics</span>
                 <kbd class="bg-secondary text-white px-2 py-1 rounded">A</kbd>
               </div>
+              <div class="list-group-item d-flex justify-content-between align-items-center">
+                <span><i class="bi bi-layout-sidebar text-primary"></i> Toggle sidebar</span>
+                <kbd class="bg-secondary text-white px-2 py-1 rounded">S</kbd>
+              </div>
               <div class="list-group-item d-flex justify-content-between align-items-center">
                 <span><i class="bi bi-question-circle text-primary"></i> Show this help</span>
                 <kbd class="bg-secondary text-white px-2 py-1 rounded">?</kbd>
@@ -1020,449 +273,30 @@
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 
-    <!-- Pure JavaScript Theme Toggle -->
-    <script>
-      // Load saved theme on page load (before DOMContentLoaded to prevent flash)
-      (function() {
-        const savedTheme = localStorage.getItem('theme');
-        if (savedTheme === 'dark') {
-          document.body.classList.add('dark-mode');
-        }
-      })();
-
-      // Theme toggle after DOM loads
-      document.addEventListener('DOMContentLoaded', function() {
-        const themeToggle = document.getElementById('themeToggle');
-        const themeIcon = document.getElementById('themeIcon');
-
-        // Update icon based on current theme
-        function updateIcon() {
-          if (document.body.classList.contains('dark-mode')) {
-            themeIcon.className = 'bi bi-sun-fill';
-          } else {
-            themeIcon.className = 'bi bi-moon-fill';
-          }
-        }
-
-        // Set initial icon
-        updateIcon();
-
-        // Toggle theme on button click
-        themeToggle.addEventListener('click', function() {
-          console.log('🎨 Theme toggle clicked');
-
-          document.body.classList.toggle('dark-mode');
-          const isDark = document.body.classList.contains('dark-mode');
-
-          console.log('Dark mode:', isDark);
-
-          // Save preference
-          localStorage.setItem('theme', isDark ? 'dark' : 'light');
-          console.log('💾 Saved to localStorage:', isDark ? 'dark' : 'light');
-
-          // Update icon
-          updateIcon();
-          console.log('✅ Theme toggled successfully');
-
-          // Reapply chart theme
-          applyChartTheme();
-
-          // Reload page to update charts properly
-          setTimeout(() => location.reload(), 300);
-        });
-
-        // Chart.js theme colors - ULTRA AGGRESSIVE setup
-        function applyChartTheme() {
-          if (typeof Chart !== 'undefined') {
-            const isDark = document.body.classList.contains('dark-mode');
-            const textColor = isDark ? '#cdd6f4' : '#1f2937';
-            const gridColor = isDark ? 'rgba(88, 91, 112, 0.2)' : 'rgba(0, 0, 0, 0.1)';
-
-            console.log('📊 Setting Chart.js theme:', isDark ? 'DARK' : 'light', '| Text:', textColor);
-
-            // Global defaults
-            Chart.defaults.color = textColor;
-            Chart.defaults.borderColor = gridColor;
-            Chart.defaults.font = Chart.defaults.font || {};
-            Chart.defaults.font.color = textColor;
-
-            // Scale defaults (axes) - AGGRESSIVE
-            if (Chart.defaults.scale) {
-              Chart.defaults.scale.ticks = Chart.defaults.scale.ticks || {};
-              Chart.defaults.scale.ticks.color = textColor;
-              Chart.defaults.scale.ticks.font = Chart.defaults.scale.ticks.font || {};
-              Chart.defaults.scale.ticks.font.color = textColor;
-
-              Chart.defaults.scale.grid = Chart.defaults.scale.grid || {};
-              Chart.defaults.scale.grid.color = gridColor;
-
-              // Axis title (xtitle, ytitle)
-              Chart.defaults.scale.title = Chart.defaults.scale.title || {};
-              Chart.defaults.scale.title.color = textColor;
-              Chart.defaults.scale.title.font = Chart.defaults.scale.title.font || {};
-              Chart.defaults.scale.title.font.size = 14;
-            }
-
-            // X and Y axis specific
-            if (Chart.defaults.scales) {
-              // X axis
-              Chart.defaults.scales.x = Chart.defaults.scales.x || {};
-              Chart.defaults.scales.x.ticks = Chart.defaults.scales.x.ticks || {};
-              Chart.defaults.scales.x.ticks.color = textColor;
-              Chart.defaults.scales.x.title = Chart.defaults.scales.x.title || {};
-              Chart.defaults.scales.x.title.color = textColor;
-              Chart.defaults.scales.x.grid = Chart.defaults.scales.x.grid || {};
-              Chart.defaults.scales.x.grid.color = gridColor;
-
-              // Y axis
-              Chart.defaults.scales.y = Chart.defaults.scales.y || {};
-              Chart.defaults.scales.y.ticks = Chart.defaults.scales.y.ticks || {};
-              Chart.defaults.scales.y.ticks.color = textColor;
-              Chart.defaults.scales.y.title = Chart.defaults.scales.y.title || {};
-              Chart.defaults.scales.y.title.color = textColor;
-              Chart.defaults.scales.y.grid = Chart.defaults.scales.y.grid || {};
-              Chart.defaults.scales.y.grid.color = gridColor;
-            }
-
-            // Plugin defaults
-            if (Chart.defaults.plugins) {
-              // Legend
-              if (Chart.defaults.plugins.legend) {
-                Chart.defaults.plugins.legend.labels = Chart.defaults.plugins.legend.labels || {};
-                Chart.defaults.plugins.legend.labels.color = textColor;
-                Chart.defaults.plugins.legend.labels.font = Chart.defaults.plugins.legend.labels.font || {};
-                Chart.defaults.plugins.legend.labels.font.color = textColor;
-              }
-
-              // Tooltip
-              if (Chart.defaults.plugins.tooltip) {
-                Chart.defaults.plugins.tooltip.backgroundColor = isDark ? '#313244' : 'rgba(255, 255, 255, 0.95)';
-                Chart.defaults.plugins.tooltip.titleColor = isDark ? textColor : '#1f2937';
-                Chart.defaults.plugins.tooltip.bodyColor = isDark ? textColor : '#1f2937';
-                Chart.defaults.plugins.tooltip.borderColor = isDark ? '#585b70' : 'rgba(0, 0, 0, 0.2)';
-                Chart.defaults.plugins.tooltip.borderWidth = 1;
-              }
-
-              // Title plugin
-              if (Chart.defaults.plugins.title) {
-                Chart.defaults.plugins.title.color = textColor;
-                Chart.defaults.plugins.title.font = Chart.defaults.plugins.title.font || {};
-                Chart.defaults.plugins.title.font.color = textColor;
-              }
-            }
-
-            console.log('✅ Chart.js theme applied - all text should be:', textColor);
-          } else {
-            console.warn('⚠️ Chart.js not loaded yet');
-          }
-
-          // Also update Google Charts if present
-          if (typeof google !== 'undefined' && google.visualization) {
-            console.log('📊 Google Charts detected - applying theme');
-          }
-        }
-
-        // Apply chart theme on load
-        applyChartTheme();
-
-        // NUCLEAR OPTION: Watch for chart creation and force colors
-        const observer = new MutationObserver(function(mutations) {
-          mutations.forEach(function(mutation) {
-            mutation.addedNodes.forEach(function(node) {
-              if (node.tagName === 'CANVAS') {
-                console.log('🎨 New chart detected, forcing theme...');
-                setTimeout(applyChartTheme, 100);
-              }
-            });
-          });
-        });
-
-        observer.observe(document.body, {
-          childList: true,
-          subtree: true
-        });
-
-        // Also listen for Chartkick chart creation events
-        document.addEventListener('chartkick:load', function() {
-          console.log('📊 Chartkick loaded, applying theme');
-          applyChartTheme();
-        });
-
-        // Force reapply every 500ms for the first 3 seconds (in case charts load late)
-        let attempts = 0;
-        const forceInterval = setInterval(function() {
-          attempts++;
-          applyChartTheme();
-          console.log('🔄 Force applying theme (attempt', attempts, ')');
-          if (attempts >= 6) {
-            clearInterval(forceInterval);
-            console.log('✅ Stopped force applying');
-          }
-        }, 500);
-
-        // Copy to clipboard functionality
-        window.copyToClipboard = function(text, button) {
-          navigator.clipboard.writeText(text).then(function() {
-            // Store original button HTML
-            const originalHTML = button.innerHTML;
-
-            // Show success state on button
-            button.innerHTML = '<i class="bi bi-check"></i> Copied!';
-            button.classList.remove('btn-outline-secondary');
-            button.classList.add('btn-success');
-
-            // Show toast notification
-            showToast('Copied to clipboard!', 'success');
-
-            // Reset button after 2 seconds
-            setTimeout(function() {
-              button.innerHTML = originalHTML;
-              button.classList.remove('btn-success');
-              button.classList.add('btn-outline-secondary');
-            }, 2000);
-          }).catch(function(err) {
-            console.error('Failed to copy:', err);
-            button.innerHTML = '<i class="bi bi-x"></i> Failed';
-            showToast('Failed to copy to clipboard', 'danger');
-          });
-        };
-
-        // Toast notification functionality
-        window.showToast = function(message, type) {
-          type = type || 'success';
-
-          const toastId = 'toast-' + Date.now();
-          const iconClass = type === 'success' ? 'bi-check-circle-fill' :
-                           type === 'danger' ? 'bi-exclamation-circle-fill' :
-                           'bi-info-circle-fill';
-          const bgClass = type === 'success' ? 'bg-success' :
-                         type === 'danger' ? 'bg-danger' :
-                         'bg-info';
-
-          const toastHTML = `
-            <div id="${toastId}" class="toast align-items-center text-white ${bgClass} border-0" role="alert" aria-live="assertive" aria-atomic="true">
-              <div class="d-flex">
-                <div class="toast-body">
-                  <i class="bi ${iconClass} me-2"></i>
-                  ${message}
-                </div>
-                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
-              </div>
-            </div>
-          `;
-
-          const container = document.querySelector('.toast-container');
-          container.insertAdjacentHTML('beforeend', toastHTML);
-
-          const toastElement = document.getElementById(toastId);
-          const toast = new bootstrap.Toast(toastElement, { delay: 4000 });
-          toast.show();
-
-          // Remove toast element after it's hidden
-          toastElement.addEventListener('hidden.bs.toast', function() {
-            toastElement.remove();
-          });
-        };
 
-        // Show flash messages as toasts
-        <% if defined?(flash) && flash.present? %>
-          <% if flash[:notice] %>
-            showToast('<%= j flash[:notice] %>', 'success');
-          <% end %>
-          <% if flash[:alert] %>
-            showToast('<%= j flash[:alert] %>', 'danger');
-          <% end %>
-          <% if flash[:success] %>
-            showToast('<%= j flash[:success] %>', 'success');
-          <% end %>
-          <% if flash[:error] %>
-            showToast('<%= j flash[:error] %>', 'danger');
-          <% end %>
+    <!-- Dashboard JavaScript -->
+    <script src="/rails_error_dashboard/js/syntax-highlighting.js"></script>
+    <script src="/rails_error_dashboard/js/theme-toggle.js"></script>
+    <script src="/rails_error_dashboard/js/utilities.js"></script>
+    <script src="/rails_error_dashboard/js/sidebar-toggle.js"></script>
+    
+    <!-- Flash Messages -->
+    <script>
+      // Show flash messages as toasts
+      <% if defined?(flash) && flash.present? %>
+        <% if flash[:notice] %>
+          showToast('<%= j flash[:notice] %>', 'success');
         <% end %>
-
-        // Local Timezone Conversion
-        // Converts UTC timestamps to user's local timezone on page load
-        function convertToLocalTime() {
-          // Convert all .local-time elements (formatted timestamps)
-          document.querySelectorAll('.local-time').forEach(function(element) {
-            const utcString = element.dataset.utc;
-            const formatString = element.dataset.format;
-
-            if (!utcString) return;
-
-            try {
-              const date = new Date(utcString);
-              if (isNaN(date.getTime())) return; // Invalid date
-
-              // Parse the format string and convert to local time
-              const formatted = formatDateTime(date, formatString);
-
-              // Get timezone abbreviation
-              const timezone = getTimezoneAbbreviation(date);
-
-              // Update element text
-              element.textContent = formatted + ' ' + timezone;
-              element.title = 'Your local time (click to see UTC)';
-
-              // Add click handler to toggle between local and UTC
-              element.style.cursor = 'pointer';
-              element.dataset.originalUtc = utcString;
-              element.dataset.localFormatted = formatted + ' ' + timezone;
-              element.dataset.showingLocal = 'true';
-
-              element.addEventListener('click', function() {
-                if (this.dataset.showingLocal === 'true') {
-                  // Show UTC
-                  const utcDate = new Date(this.dataset.originalUtc);
-                  const utcFormatted = formatDateTime(utcDate, formatString);
-                  this.textContent = utcFormatted + ' UTC';
-                  this.title = 'UTC time (click to see local time)';
-                  this.dataset.showingLocal = 'false';
-                } else {
-                  // Show local
-                  this.textContent = this.dataset.localFormatted;
-                  this.title = 'Your local time (click to see UTC)';
-                  this.dataset.showingLocal = 'true';
-                }
-              });
-            } catch (e) {
-              console.error('Error converting timestamp:', e);
-            }
-          });
-
-          // Convert all .local-time-ago elements (relative time)
-          document.querySelectorAll('.local-time-ago').forEach(function(element) {
-            const utcString = element.dataset.utc;
-            if (!utcString) return;
-
-            try {
-              const date = new Date(utcString);
-              if (isNaN(date.getTime())) return; // Invalid date
-
-              // Calculate relative time
-              const now = new Date();
-              const diffMs = now - date;
-              const formatted = formatRelativeTime(diffMs);
-
-              // Update element text
-              element.textContent = formatted;
-              element.title = 'Click to see exact time';
-
-              // Add click handler to toggle between relative and absolute
-              element.style.cursor = 'pointer';
-              element.dataset.originalUtc = utcString;
-              element.dataset.showingRelative = 'true';
-
-              element.addEventListener('click', function() {
-                if (this.dataset.showingRelative === 'true') {
-                  // Show absolute time
-                  const absoluteDate = new Date(this.dataset.originalUtc);
-                  const absoluteFormatted = formatDateTime(absoluteDate, '%B %d, %Y %I:%M:%S %p');
-                  const timezone = getTimezoneAbbreviation(absoluteDate);
-                  this.textContent = absoluteFormatted + ' ' + timezone;
-                  this.title = 'Click to see relative time';
-                  this.dataset.showingRelative = 'false';
-                } else {
-                  // Show relative time
-                  const now = new Date();
-                  const date = new Date(this.dataset.originalUtc);
-                  const diffMs = now - date;
-                  this.textContent = formatRelativeTime(diffMs);
-                  this.title = 'Click to see exact time';
-                  this.dataset.showingRelative = 'true';
-                }
-              });
-            } catch (e) {
-              console.error('Error converting relative time:', e);
-            }
-          });
-        }
-
-        // Format date according to strftime-like format string
-        function formatDateTime(date, formatString) {
-          const months = ['January', 'February', 'March', 'April', 'May', 'June',
-                          'July', 'August', 'September', 'October', 'November', 'December'];
-          const monthsShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-                               'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-          const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-          const daysShort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-
-          const year = date.getFullYear();
-          const month = date.getMonth();
-          const day = date.getDate();
-          const hours = date.getHours();
-          const minutes = date.getMinutes();
-          const seconds = date.getSeconds();
-          const dayOfWeek = date.getDay();
-
-          // 12-hour format
-          const hours12 = hours % 12 || 12;
-          const ampm = hours >= 12 ? 'PM' : 'AM';
-
-          // Padding helper
-          const pad = (n) => n.toString().padStart(2, '0');
-
-          // Replace format specifiers
-          let result = formatString
-            .replace('%Y', year)
-            .replace('%y', year.toString().substr(2))
-            .replace('%B', months[month])
-            .replace('%b', monthsShort[month])
-            .replace('%m', pad(month + 1))
-            .replace('%d', pad(day))
-            .replace('%e', day)
-            .replace('%A', days[dayOfWeek])
-            .replace('%a', daysShort[dayOfWeek])
-            .replace('%H', pad(hours))
-            .replace('%I', pad(hours12))
-            .replace('%M', pad(minutes))
-            .replace('%S', pad(seconds))
-            .replace('%p', ampm)
-            .replace('%P', ampm.toLowerCase());
-
-          return result;
-        }
-
-        // Get timezone abbreviation (e.g., "PST", "EST", "UTC+2")
-        function getTimezoneAbbreviation(date) {
-          const timeZoneString = date.toLocaleTimeString('en-US', { timeZoneName: 'short' });
-          const parts = timeZoneString.split(' ');
-          return parts[parts.length - 1]; // Last part is timezone abbreviation
-        }
-
-        // Format relative time ("3 hours ago", "2 days ago")
-        function formatRelativeTime(diffMs) {
-          const seconds = Math.floor(diffMs / 1000);
-          const minutes = Math.floor(seconds / 60);
-          const hours = Math.floor(minutes / 60);
-          const days = Math.floor(hours / 24);
-          const months = Math.floor(days / 30);
-          const years = Math.floor(days / 365);
-
-          if (seconds < 60) {
-            return seconds <= 1 ? '1 second ago' : seconds + ' seconds ago';
-          } else if (minutes < 60) {
-            return minutes === 1 ? '1 minute ago' : minutes + ' minutes ago';
-          } else if (hours < 24) {
-            return hours === 1 ? '1 hour ago' : hours + ' hours ago';
-          } else if (days < 30) {
-            return days === 1 ? '1 day ago' : days + ' days ago';
-          } else if (months < 12) {
-            return months === 1 ? '1 month ago' : months + ' months ago';
-          } else {
-            return years === 1 ? '1 year ago' : years + ' years ago';
-          }
-        }
-
-        // Run conversion on page load
-        convertToLocalTime();
-
-        // Also run after Turbo navigation (if using Turbo/Hotwire)
-        if (typeof Turbo !== 'undefined') {
-          document.addEventListener('turbo:load', convertToLocalTime);
-          document.addEventListener('turbo:frame-load', convertToLocalTime);
-        }
-      });
+        <% if flash[:alert] %>
+          showToast('<%= j flash[:alert] %>', 'danger');
+        <% end %>
+        <% if flash[:success] %>
+          showToast('<%= j flash[:success] %>', 'success');
+        <% end %>
+        <% if flash[:error] %>
+          showToast('<%= j flash[:error] %>', 'danger');
+        <% end %>
+      <% end %>
     </script>
   </body>
 </html>