sincerely 1.0.0

data/app/views/sincerely/dashboard/index.html.erb

@@ -0,0 +1,382 @@
+<div class="page-header">
+  <h1 class="page-title">Dashboard</h1>
+</div>
+
+<div class="stats-grid">
+  <div class="stat-card">
+    <div class="stat-label">Total Notifications</div>
+    <div class="stat-value primary"><%= number_with_delimiter(@total_notifications) %></div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-label">Delivery Rate</div>
+    <div class="stat-value success"><%= @delivery_rate %>%</div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-label">Open Rate</div>
+    <div class="stat-value warning"><%= @open_rate %>%</div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-label">Bounce Rate</div>
+    <div class="stat-value danger"><%= @bounce_rate %>%</div>
+  </div>
+</div>
+
+<%# Line Chart - Notifications Over Time %>
+<div class="card">
+  <div class="card-header">
+    <h2 class="card-title">Notifications Over Time</h2>
+  </div>
+  <% if @notifications_timeline[:series].any? %>
+    <%
+      state_colors = {
+        'draft' => '#9ca3af',
+        'accepted' => '#B9E0B8',
+        'delivered' => '#10b981',
+        'opened' => '#78c6cc',
+        'clicked' => '#BDD9DB',
+        'bounced' => '#D4183D',
+        'rejected' => '#D4183D',
+        'complained' => '#D4183D',
+        'delayed' => '#f97316'
+      }
+
+      labels = @notifications_timeline[:labels]
+      series = @notifications_timeline[:series]
+
+      # Chart dimensions
+      chart_width = 800
+      chart_height = 220
+      padding_left = 45
+      padding_right = 20
+      padding_top = 20
+      padding_bottom = 30
+
+      plot_width = chart_width - padding_left - padding_right
+      plot_height = chart_height - padding_top - padding_bottom
+
+      max_value = series.values.flatten.max || 0
+      max_value = [max_value, 1].max  # Minimum of 1 to avoid division by zero
+
+      magnitude = 10 ** Math.log10([max_value, 1].max).floor
+      max_y = ((max_value.to_f / magnitude).ceil * magnitude).to_i
+      max_y = [max_y, 1].max
+
+      x_step = labels.length > 1 ? plot_width.to_f / (labels.length - 1) : plot_width
+    %>
+    <div class="line-chart-container" id="lineChart">
+      <div class="line-chart-wrapper">
+        <svg class="line-chart" viewBox="0 0 <%= chart_width %> <%= chart_height %>" preserveAspectRatio="xMidYMid meet">
+          <%# Grid lines %>
+          <% 5.times do |i| %>
+            <% y = padding_top + (plot_height * i / 4.0) %>
+            <line class="line-chart-grid" x1="<%= padding_left %>" y1="<%= y %>" x2="<%= chart_width - padding_right %>" y2="<%= y %>" />
+            <text class="line-chart-label line-chart-label-y" x="<%= padding_left - 8 %>" y="<%= y + 3 %>"><%= (max_y * (4 - i) / 4.0).round %></text>
+          <% end %>
+
+          <%# X-axis labels (show subset to avoid overlap) %>
+          <% label_step = [1, (labels.length / 8.0).ceil].max %>
+          <% labels.each_with_index do |label, i| %>
+            <% if i % label_step == 0 || i == labels.length - 1 %>
+              <% x = padding_left + (i * x_step) %>
+              <text class="line-chart-label line-chart-label-x" x="<%= x %>" y="<%= chart_height - 8 %>"><%= label %></text>
+            <% end %>
+          <% end %>
+
+          <%# Lines for each state %>
+          <% series.each do |state, values| %>
+            <% color = state_colors[state.to_s] || '#6b7280' %>
+            <%
+              points = values.each_with_index.map do |value, i|
+                x = padding_left + (i * x_step)
+                y = padding_top + plot_height - (value.to_f / max_y * plot_height)
+                "#{x.round(2)},#{y.round(2)}"
+              end.join(' ')
+
+              # Area fill points
+              area_points = "#{padding_left},#{padding_top + plot_height} #{points} #{padding_left + ((values.length - 1) * x_step)},#{padding_top + plot_height}"
+            %>
+            <polygon class="line-chart-area" data-state="<%= state %>" fill="<%= color %>" points="<%= area_points %>" />
+            <polyline class="line-chart-line" data-state="<%= state %>" stroke="<%= color %>" points="<%= points %>" />
+          <% end %>
+        </svg>
+      </div>
+
+      <%# Legend %>
+      <div class="line-chart-legend">
+        <% series.each do |state, values| %>
+          <% color = state_colors[state.to_s] || '#6b7280' %>
+          <div class="line-chart-legend-item" data-state="<%= state %>">
+            <span class="donut-legend-color" style="background: <%= color %>"></span>
+            <span class="donut-legend-text"><%= state.to_s.humanize %></span>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+    <script>
+      (function() {
+        const chart = document.getElementById('lineChart');
+        if (!chart) return;
+
+        const lines = chart.querySelectorAll('.line-chart-line');
+        const areas = chart.querySelectorAll('.line-chart-area');
+        const legendItems = chart.querySelectorAll('.line-chart-legend-item');
+
+        function highlightState(state) {
+          lines.forEach(line => {
+            if (line.dataset.state === state) {
+              line.classList.add('highlighted');
+              line.classList.remove('dimmed');
+            } else {
+              line.classList.add('dimmed');
+              line.classList.remove('highlighted');
+            }
+          });
+          areas.forEach(area => {
+            if (area.dataset.state === state) {
+              area.classList.add('highlighted');
+              area.classList.remove('dimmed');
+            } else {
+              area.classList.add('dimmed');
+              area.classList.remove('highlighted');
+            }
+          });
+          legendItems.forEach(item => {
+            if (item.dataset.state === state) {
+              item.classList.add('highlighted');
+              item.classList.remove('dimmed');
+            } else {
+              item.classList.add('dimmed');
+              item.classList.remove('highlighted');
+            }
+          });
+        }
+
+        function resetHighlight() {
+          lines.forEach(line => line.classList.remove('highlighted', 'dimmed'));
+          areas.forEach(area => area.classList.remove('highlighted', 'dimmed'));
+          legendItems.forEach(item => item.classList.remove('highlighted', 'dimmed'));
+        }
+
+        legendItems.forEach(item => {
+          item.addEventListener('mouseenter', () => highlightState(item.dataset.state));
+          item.addEventListener('mouseleave', resetHighlight);
+        });
+
+        lines.forEach(line => {
+          line.addEventListener('mouseenter', () => highlightState(line.dataset.state));
+          line.addEventListener('mouseleave', resetHighlight);
+        });
+
+        areas.forEach(area => {
+          area.addEventListener('mouseenter', () => highlightState(area.dataset.state));
+          area.addEventListener('mouseleave', resetHighlight);
+        });
+      })();
+    </script>
+  <% else %>
+    <div class="line-chart-empty">No notifications in this period</div>
+  <% end %>
+</div>
+
+<div class="grid grid-2">
+  <div class="card">
+    <div class="card-header">
+      <h2 class="card-title">Notifications by Status</h2>
+    </div>
+    <% if @notifications_by_state.any? %>
+      <%
+        state_colors = {
+        'draft' => '#9ca3af',
+        'accepted' => '#B9E0B8',
+        'delivered' => '#10b981',
+        'opened' => '#78c6cc',
+        'clicked' => '#BDD9DB',
+        'bounced' => '#D4183D',
+        'rejected' => '#D4183D',
+        'complained' => '#D4183D',
+        'delayed' => '#f97316'
+      }
+        total = @notifications_by_state.values.sum
+        radius = 68
+        circumference = 2 * Math::PI * radius
+        offset = 0
+      %>
+      <div class="donut-chart-container" id="donutChart">
+        <div class="donut-chart-wrapper">
+          <svg class="donut-chart" viewBox="0 0 200 200">
+            <% @notifications_by_state.each do |state, count| %>
+              <%
+                percentage = count.to_f / total
+                dash_length = circumference * percentage
+                # Add small overlap to prevent visual gaps between segments
+                overlap = 0.5
+                visible_dash = dash_length + overlap
+                color = state_colors[state.to_s] || '#6b7280'
+              %>
+              <circle
+                class="donut-segment"
+                data-state="<%= state %>"
+                cx="100" cy="100" r="<%= radius %>"
+                stroke="<%= color %>"
+                stroke-dasharray="<%= visible_dash %> <%= circumference - visible_dash %>"
+                stroke-dashoffset="<%= -offset %>"
+              />
+              <% offset += dash_length %>
+            <% end %>
+          </svg>
+          <div class="donut-center">
+            <div class="donut-center-value"><%= number_with_delimiter(total) %></div>
+            <div class="donut-center-label">Total</div>
+          </div>
+        </div>
+        <div class="donut-legend">
+          <% @notifications_by_state.each do |state, count| %>
+            <% color = state_colors[state.to_s] || '#6b7280' %>
+            <div class="donut-legend-item" data-state="<%= state %>">
+              <span class="donut-legend-color" style="background: <%= color %>"></span>
+              <span class="donut-legend-text"><%= state.to_s.humanize %></span>
+              <span class="donut-legend-count"><%= number_with_delimiter(count) %></span>
+            </div>
+          <% end %>
+        </div>
+      </div>
+      <script>
+        (function() {
+          const chart = document.getElementById('donutChart');
+          if (!chart) return;
+
+          const segments = chart.querySelectorAll('.donut-segment');
+          const legendItems = chart.querySelectorAll('.donut-legend-item');
+
+          function highlightState(state) {
+            segments.forEach(seg => {
+              if (seg.dataset.state === state) {
+                seg.classList.add('highlighted');
+                seg.classList.remove('dimmed');
+              } else {
+                seg.classList.add('dimmed');
+                seg.classList.remove('highlighted');
+              }
+            });
+            legendItems.forEach(item => {
+              if (item.dataset.state === state) {
+                item.classList.add('highlighted');
+                item.classList.remove('dimmed');
+              } else {
+                item.classList.add('dimmed');
+                item.classList.remove('highlighted');
+              }
+            });
+          }
+
+          function resetHighlight() {
+            segments.forEach(seg => {
+              seg.classList.remove('highlighted', 'dimmed');
+            });
+            legendItems.forEach(item => {
+              item.classList.remove('highlighted', 'dimmed');
+            });
+          }
+
+          legendItems.forEach(item => {
+            item.addEventListener('mouseenter', () => highlightState(item.dataset.state));
+            item.addEventListener('mouseleave', resetHighlight);
+          });
+
+          segments.forEach(seg => {
+            seg.addEventListener('mouseenter', () => highlightState(seg.dataset.state));
+            seg.addEventListener('mouseleave', resetHighlight);
+          });
+        })();
+      </script>
+    <% else %>
+      <div class="donut-empty">No notifications in this period</div>
+    <% end %>
+  </div>
+
+  <div class="card">
+    <div class="card-header">
+      <h2 class="card-title">Recent Notifications</h2>
+      <a href="<%= sincerely.notifications_path %>" class="btn btn-secondary btn-sm">View All</a>
+    </div>
+    <div class="table-wrapper">
+      <table>
+        <thead>
+          <tr><th>Recipient</th><th>Status</th><th>Date</th></tr>
+        </thead>
+        <tbody>
+          <% if @recent_notifications.any? %>
+            <% @recent_notifications.each do |notification| %>
+              <tr class="clickable-row" onclick="window.location='<%= sincerely.notification_path(notification) %>'">
+                <td><%= truncate(notification.recipient, length: 30) %></td>
+                <td><span class="badge badge-<%= notification.delivery_state %>"><%= notification.delivery_state.humanize %></span></td>
+                <td><%= notification.created_at.strftime('%b %d, %H:%M') %></td>
+              </tr>
+            <% end %>
+          <% else %>
+            <tr><td colspan="3" class="empty-state">No recent notifications</td></tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<div class="grid grid-2">
+  <div class="card">
+    <div class="card-header">
+      <h2 class="card-title">Recent Delivery Events</h2>
+      <a href="<%= sincerely.delivery_events_path %>" class="btn btn-secondary btn-sm">View All</a>
+    </div>
+    <div class="table-wrapper">
+      <table>
+        <thead>
+          <tr><th>Type</th><th>Recipient</th><th>Time</th></tr>
+        </thead>
+        <tbody>
+          <% if @recent_delivery_events.any? %>
+            <% @recent_delivery_events.each do |event| %>
+              <% notification = notification_model.find_by(message_id: event.message_id) %>
+              <tr<%= " class=\"clickable-row\" onclick=\"window.location='#{sincerely.notification_path(notification)}'\"".html_safe if notification %>>
+                <td><span class="badge badge-<%= event.event_type %>"><%= event.event_type %></span></td>
+                <td><%= truncate(event.recipient, length: 25) %></td>
+                <td><%= (event.timestamp || event.created_at).strftime('%b %d, %H:%M') %></td>
+              </tr>
+            <% end %>
+          <% else %>
+            <tr><td colspan="3" class="empty-state">No delivery events</td></tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="card-header">
+      <h2 class="card-title">Recent Engagement Events</h2>
+      <a href="<%= sincerely.engagement_events_path %>" class="btn btn-secondary btn-sm">View All</a>
+    </div>
+    <div class="table-wrapper">
+      <table>
+        <thead>
+          <tr><th>Type</th><th>Recipient</th><th>Time</th></tr>
+        </thead>
+        <tbody>
+          <% if @recent_engagement_events.any? %>
+            <% @recent_engagement_events.each do |event| %>
+              <% notification = notification_model.find_by(message_id: event.message_id) %>
+              <tr<%= " class=\"clickable-row\" onclick=\"window.location='#{sincerely.notification_path(notification)}'\"".html_safe if notification %>>
+                <td><span class="badge badge-<%= event.event_type %>"><%= event.event_type %></span></td>
+                <td><%= truncate(event.recipient, length: 25) %></td>
+                <td><%= (event.timestamp || event.created_at).strftime('%b %d, %H:%M') %></td>
+              </tr>
+            <% end %>
+          <% else %>
+            <tr><td colspan="3" class="empty-state">No engagement events</td></tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

data/app/views/sincerely/delivery_events/index.html.erb

@@ -0,0 +1,97 @@
+<div class="page-header">
+  <h1 class="page-title">Delivery Events</h1>
+  <p class="page-subtitle">Email delivery status events from your provider</p>
+</div>
+
+<div class="card">
+  <div class="card-header">
+    <h2 class="card-title">Filters</h2>
+  </div>
+  <form method="get" action="<%= sincerely.delivery_events_path %>" class="filters-form">
+    <div class="filters-grid">
+      <div class="filter-group">
+        <label for="event_type">Status</label>
+        <select name="event_type" id="event_type">
+          <option value="">All statuses</option>
+          <% @event_types.each do |type| %>
+            <option value="<%= type %>" <%= 'selected' if params[:event_type] == type %>><%= type.to_s.humanize %></option>
+          <% end %>
+        </select>
+      </div>
+      <div class="filter-group">
+        <label for="template_id">Template</label>
+        <select name="template_id" id="template_id">
+          <option value="">All templates</option>
+          <% @templates.each do |template| %>
+            <option value="<%= template.id %>" <%= 'selected' if params[:template_id] == template.id.to_s %>>
+              <%= template.name %>
+            </option>
+          <% end %>
+        </select>
+      </div>
+      <div class="filter-group">
+        <label for="recipient">Recipient</label>
+        <input type="text" name="recipient" id="recipient" value="<%= params[:recipient] %>" placeholder="Search by recipient...">
+      </div>
+      <div class="filter-group">
+        <label for="notification_type">Type</label>
+        <select name="notification_type" id="notification_type">
+          <option value="">All types</option>
+          <option value="email" <%= 'selected' if params[:notification_type] == 'email' %>>Email</option>
+          <option value="sms" <%= 'selected' if params[:notification_type] == 'sms' %>>SMS</option>
+          <option value="push" <%= 'selected' if params[:notification_type] == 'push' %>>Push</option>
+        </select>
+      </div>
+    </div>
+    <div class="filter-actions">
+      <button type="submit" class="btn btn-primary">Apply Filters</button>
+      <a href="<%= sincerely.delivery_events_path %>" class="btn btn-secondary">Clear</a>
+    </div>
+  </form>
+</div>
+
+<div class="card">
+  <div class="card-header">
+    <h2 class="card-title">Events (<%= @pagination[:total_count] %>)</h2>
+  </div>
+  <div class="table-wrapper">
+    <table>
+      <thead>
+        <tr>
+          <th>Type</th>
+          <th>Recipient</th>
+          <th>Message ID</th>
+          <th>Details</th>
+          <th>Timestamp</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @events.each do |event| %>
+          <% notification = notification_model.find_by(message_id: event.message_id) %>
+          <tr<%= " class=\"clickable-row\" onclick=\"window.location='#{sincerely.notification_path(notification)}'\"".html_safe if notification %>>
+            <td><span class="badge badge-<%= event.event_type %>"><%= event.event_type %></span></td>
+            <td><%= truncate(event.recipient, length: 30) %></td>
+            <td><code><%= truncate(event.message_id, length: 20) %></code></td>
+            <td>
+              <% if event.options.present? %>
+                <details onclick="event.stopPropagation()">
+                  <summary class="btn btn-secondary btn-sm">View</summary>
+                  <pre class="event-details"><%= JSON.pretty_generate(event.options) rescue event.options %></pre>
+                </details>
+              <% else %>
+                -
+              <% end %>
+            </td>
+            <td><%= (event.timestamp || event.created_at).strftime('%b %d, %Y %H:%M:%S') %></td>
+          </tr>
+        <% end %>
+        <% if @events.empty? %>
+          <tr>
+            <td colspan="5" class="empty-state">No delivery events found</td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+  <%= render 'sincerely/shared/pagination', pagination: @pagination %>
+</div>

data/app/views/sincerely/engagement_events/index.html.erb

@@ -0,0 +1,97 @@
+<div class="page-header">
+  <h1 class="page-title">Engagement Events</h1>
+  <p class="page-subtitle">Email opens, clicks, and other engagement metrics</p>
+</div>
+
+<div class="card">
+  <div class="card-header">
+    <h2 class="card-title">Filters</h2>
+  </div>
+  <form method="get" action="<%= sincerely.engagement_events_path %>" class="filters-form">
+    <div class="filters-grid">
+      <div class="filter-group">
+        <label for="event_type">Status</label>
+        <select name="event_type" id="event_type">
+          <option value="">All statuses</option>
+          <% @event_types.each do |type| %>
+            <option value="<%= type %>" <%= 'selected' if params[:event_type] == type %>><%= type.to_s.humanize %></option>
+          <% end %>
+        </select>
+      </div>
+      <div class="filter-group">
+        <label for="template_id">Template</label>
+        <select name="template_id" id="template_id">
+          <option value="">All templates</option>
+          <% @templates.each do |template| %>
+            <option value="<%= template.id %>" <%= 'selected' if params[:template_id] == template.id.to_s %>>
+              <%= template.name %>
+            </option>
+          <% end %>
+        </select>
+      </div>
+      <div class="filter-group">
+        <label for="recipient">Recipient</label>
+        <input type="text" name="recipient" id="recipient" value="<%= params[:recipient] %>" placeholder="Search by recipient...">
+      </div>
+      <div class="filter-group">
+        <label for="notification_type">Type</label>
+        <select name="notification_type" id="notification_type">
+          <option value="">All types</option>
+          <option value="email" <%= 'selected' if params[:notification_type] == 'email' %>>Email</option>
+          <option value="sms" <%= 'selected' if params[:notification_type] == 'sms' %>>SMS</option>
+          <option value="push" <%= 'selected' if params[:notification_type] == 'push' %>>Push</option>
+        </select>
+      </div>
+    </div>
+    <div class="filter-actions">
+      <button type="submit" class="btn btn-primary">Apply Filters</button>
+      <a href="<%= sincerely.engagement_events_path %>" class="btn btn-secondary">Clear</a>
+    </div>
+  </form>
+</div>
+
+<div class="card">
+  <div class="card-header">
+    <h2 class="card-title">Events (<%= @pagination[:total_count] %>)</h2>
+  </div>
+  <div class="table-wrapper">
+    <table>
+      <thead>
+        <tr>
+          <th>Type</th>
+          <th>Recipient</th>
+          <th>Message ID</th>
+          <th>Details</th>
+          <th>Timestamp</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @events.each do |event| %>
+          <% notification = notification_model.find_by(message_id: event.message_id) %>
+          <tr<%= " class=\"clickable-row\" onclick=\"window.location='#{sincerely.notification_path(notification)}'\"".html_safe if notification %>>
+            <td><span class="badge badge-<%= event.event_type %>"><%= event.event_type %></span></td>
+            <td><%= truncate(event.recipient, length: 30) %></td>
+            <td><code><%= truncate(event.message_id, length: 20) %></code></td>
+            <td>
+              <% if event.options.present? %>
+                <details onclick="event.stopPropagation()">
+                  <summary class="btn btn-secondary btn-sm">View</summary>
+                  <pre class="event-details"><%= JSON.pretty_generate(event.options) rescue event.options %></pre>
+                </details>
+              <% else %>
+                -
+              <% end %>
+            </td>
+            <td><%= (event.timestamp || event.created_at).strftime('%b %d, %Y %H:%M:%S') %></td>
+          </tr>
+        <% end %>
+        <% if @events.empty? %>
+          <tr>
+            <td colspan="5" class="empty-state">No engagement events found</td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+  <%= render 'sincerely/shared/pagination', pagination: @pagination %>
+</div>

data/app/views/sincerely/notifications/index.html.erb

@@ -0,0 +1,91 @@
+<div class="page-header">
+  <h1 class="page-title">Notifications</h1>
+  <p class="page-subtitle">All notifications sent through the system</p>
+</div>
+
+<div class="card">
+  <div class="card-header">
+    <h2 class="card-title">Filter Notifications</h2>
+  </div>
+  <form method="get" action="<%= sincerely.notifications_path %>" class="filters-form">
+    <div class="filters-grid">
+      <div class="filter-group">
+        <label for="status">Status</label>
+        <select name="status" id="status">
+          <option value="">All statuses</option>
+          <% @states.each do |state| %>
+            <option value="<%= state %>" <%= 'selected' if params[:status] == state %>>
+              <%= state.to_s.humanize %>
+            </option>
+          <% end %>
+        </select>
+      </div>
+      <div class="filter-group">
+        <label for="template_id">Template</label>
+        <select name="template_id" id="template_id">
+          <option value="">All templates</option>
+          <% @templates.each do |template| %>
+            <option value="<%= template.id %>" <%= 'selected' if params[:template_id] == template.id.to_s %>>
+              <%= template.name %>
+            </option>
+          <% end %>
+        </select>
+      </div>
+      <div class="filter-group">
+        <label for="recipient">Recipient</label>
+        <input type="text" name="recipient" id="recipient" value="<%= params[:recipient] %>" placeholder="Search by recipient...">
+      </div>
+      <div class="filter-group">
+        <label for="notification_type">Type</label>
+        <select name="notification_type" id="notification_type">
+          <option value="">All types</option>
+          <option value="email" <%= 'selected' if params[:notification_type] == 'email' %>>Email</option>
+          <option value="sms" <%= 'selected' if params[:notification_type] == 'sms' %>>SMS</option>
+          <option value="push" <%= 'selected' if params[:notification_type] == 'push' %>>Push</option>
+        </select>
+      </div>
+    </div>
+    <div class="filter-actions">
+      <button type="submit" class="btn btn-primary">Apply Filters</button>
+      <a href="<%= sincerely.notifications_path %>" class="btn btn-secondary">Clear</a>
+    </div>
+  </form>
+</div>
+
+<div class="card">
+  <div class="card-header">
+    <h2 class="card-title">Results (<%= @pagination[:total_count] %>)</h2>
+  </div>
+  <div class="table-wrapper">
+    <table>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Recipient</th>
+          <th>Template</th>
+          <th>Type</th>
+          <th>Status</th>
+          <th>Sent At</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @notifications.each do |notification| %>
+          <tr class="clickable-row" onclick="window.location='<%= sincerely.notification_path(notification) %>'">
+            <td><%= notification.id %></td>
+            <td><%= truncate(notification.recipient, length: 35) %></td>
+            <td><%= notification.template&.name || 'N/A' %></td>
+            <td><span class="badge"><%= notification.notification_type %></span></td>
+            <td><span class="badge badge-<%= notification.delivery_state %>"><%= notification.delivery_state.humanize %></span></td>
+            <td><%= notification.sent_at&.strftime('%b %d, %Y %H:%M') || '-' %></td>
+          </tr>
+        <% end %>
+        <% if @notifications.empty? %>
+          <tr>
+            <td colspan="6" class="empty-state">No notifications found</td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+  <%= render 'sincerely/shared/pagination', pagination: @pagination %>
+</div>