chatwoot/app/views/super_admin/push_diagnostics/show.html.erb

<% content_for(:title) do %>Push Diagnostics<% end %>

<header class="main-content__header" role="banner">
  <h1 class="main-content__page-title" id="page-title">Push Diagnostics</h1>
</header>

<section class="main-content__body">
  <p class="text-sm text-slate-600 mb-6">
    Send a test push notification to a specific user's registered devices to diagnose delivery issues.
    Results show the raw FCM / Web Push / relay response so you can see exactly what failed.
  </p>

  <div class="mb-8">
    <h2 class="text-base font-semibold mb-2">1. Look up user</h2>
    <%= form_with url: super_admin_push_diagnostics_path, method: :get, local: true, class: 'flex gap-2 items-center' do |f| %>
      <%= f.text_field :user_query,
                       value: @query,
                       placeholder: 'user@example.com or numeric user ID',
                       class: 'border border-slate-100 p-1.5 rounded-md w-80' %>
      <%= f.submit 'Look up', class: 'border border-slate-200 bg-slate-50 px-3 py-1.5 rounded-md cursor-pointer' %>
    <% end %>
    <% if @query.present? && @user.nil? %>
      <p class="text-sm text-red-600 mt-2">No user found for "<%= @query %>".</p>
    <% end %>
  </div>

  <% if @user %>
    <div class="mb-6 border border-slate-100 rounded-md p-4 bg-slate-25">
      <p class="text-sm">
        <strong><%= @user.name %></strong>
        &middot; <%= @user.email %>
        &middot; ID <%= @user.id %>
      </p>
      <% if @user.accounts.any? %>
        <p class="text-xs text-slate-500 mt-1">
          Accounts:
          <% @user.accounts.each_with_index do |account, index| %>
            <%= ', ' if index.positive? %>
            <%= account.name %> (ID <%= account.id %>)
          <% end %>
        </p>
      <% end %>
    </div>

    <div class="mb-8">
      <h2 class="text-base font-semibold mb-2">2. Select subscriptions (<%= @subscriptions.count %>)</h2>
      <p class="text-xs text-amber-700 mb-3">
        ⚠️ This sends a real push to every selected device. Use only when diagnosing a reported issue.
      </p>

      <% if @subscriptions.empty? %>
        <p class="text-sm text-slate-600">This user has no push subscriptions registered.</p>
      <% else %>
        <%= form_with url: super_admin_push_diagnostics_path, method: :post, local: true do |f| %>
          <%= f.hidden_field :user_id, value: @user.id %>
          <div class="mb-4 max-w-2xl">
            <div class="mb-3">
              <%= label_tag :push_title, 'Title', class: 'block text-xs font-medium text-slate-600 mb-1' %>
              <%= text_field_tag :push_title,
                                  params[:push_title].presence || Notification::PushTestService.default_title,
                                  class: 'border border-slate-100 p-1.5 rounded-md w-full text-sm' %>
            </div>
            <div>
              <%= label_tag :push_body, 'Body', class: 'block text-xs font-medium text-slate-600 mb-1' %>
              <%= text_area_tag :push_body,
                                 params[:push_body].presence || Notification::PushTestService.default_body,
                                 rows: 2,
                                 class: 'border border-slate-100 p-1.5 rounded-md w-full text-sm' %>
            </div>
            <p class="text-xs text-slate-400 mt-1">Customers will see this text as a real push notification on their device.</p>
          </div>
          <table class="w-full text-sm border border-slate-100 rounded-md">
            <thead class="text-left text-xs text-slate-500 bg-slate-25">
              <tr>
                <th class="px-3 py-2 align-middle first:!pl-4 last:!pr-4"><input type="checkbox" id="toggle-all"></th>
                <th class="px-3 py-2 first:!pl-4 last:!pr-4">ID</th>
                <th class="px-3 py-2 first:!pl-4 last:!pr-4">Type</th>
                <th class="px-3 py-2 first:!pl-4 last:!pr-4">Device / endpoint</th>
                <th class="px-3 py-2 first:!pl-4 last:!pr-4">Push token</th>
                <th class="px-3 py-2 first:!pl-4 last:!pr-4">Device details</th>
                <th class="px-3 py-2 first:!pl-4 last:!pr-4">Created</th>
                <th class="px-3 py-2 first:!pl-4 last:!pr-4">Last updated</th>
              </tr>
            </thead>
            <tbody>
              <% @subscriptions.each do |sub| %>
                <% attrs = (sub.subscription_attributes || {}).stringify_keys %>
                <% if sub.browser_push? %>
                  <% endpoint = attrs['endpoint'].to_s %>
                  <% host = (begin; URI.parse(endpoint).host; rescue URI::InvalidURIError; nil; end) %>
                  <% device_display = host.presence || endpoint.presence || '—' %>
                  <% token_display = endpoint.present? ? "…#{endpoint.last(6)}" : '—' %>
                <% else %>
                  <% device_display = attrs['device_id'].present? ? "…#{attrs['device_id'].to_s.last(6)}" : '—' %>
                  <% token_display = attrs['push_token'].present? ? "…#{attrs['push_token'].to_s.last(6)}" : '—' %>
                <% end %>
                <% extra_attrs = attrs.except('endpoint', 'p256dh', 'auth', 'push_token', 'device_id') %>
                <tr class="border-t border-slate-100 align-middle">
                  <td class="px-3 py-2 first:!pl-4 last:!pr-4">
                    <%= check_box_tag 'subscription_ids[]', sub.id, false, class: 'subscription-checkbox' %>
                  </td>
                  <td class="px-3 py-2 first:!pl-4 last:!pr-4"><%= sub.id %></td>
                  <td class="px-3 py-2 first:!pl-4 last:!pr-4"><%= sub.subscription_type %></td>
                  <td class="px-3 py-2 first:!pl-4 last:!pr-4 font-mono text-xs break-all"><%= device_display %></td>
                  <td class="px-3 py-2 first:!pl-4 last:!pr-4 font-mono text-xs break-all"><%= token_display %></td>
                  <td class="px-3 py-2 first:!pl-4 last:!pr-4 text-xs align-top">
                    <% if extra_attrs.present? %>
                      <% extra_attrs.each do |k, v| %>
                        <div><span class="text-slate-500"><%= k %>:</span> <span class="font-mono"><%= v.to_s.truncate(40) %></span></div>
                      <% end %>
                    <% else %>
                      <span class="text-slate-400">—</span>
                    <% end %>
                  </td>
                  <td class="px-3 py-2 first:!pl-4 last:!pr-4 whitespace-nowrap"><%= sub.created_at.strftime('%Y-%m-%d %H:%M') %></td>
                  <td class="px-3 py-2 first:!pl-4 last:!pr-4 whitespace-nowrap">
                    <%= sub.updated_at.strftime('%Y-%m-%d %H:%M') %>
                    <span class="text-xs text-slate-400">(<%= time_ago_in_words(sub.updated_at) %> ago)</span>
                  </td>
                </tr>
              <% end %>
            </tbody>
          </table>
          <div class="mt-4 flex gap-2">
            <%= f.submit 'Send Test Push to Selected',
                         class: 'border border-slate-200 bg-slate-50 px-3 py-1.5 rounded-md cursor-pointer font-medium' %>
            <%= submit_tag 'Delete Selected Subscriptions',
                           formaction: destroy_subscriptions_super_admin_push_diagnostics_path,
                           formmethod: 'post',
                           data: { confirm: "Delete the selected subscription(s)? The user won't receive pushes on those devices until their app re-registers." },
                           class: 'border border-red-200 bg-red-50 text-red-700 px-3 py-1.5 rounded-md cursor-pointer font-medium' %>
          </div>
        <% end %>
      <% end %>
    </div>

    <% if @results.present? %>
      <div class="mb-8">
        <h2 class="text-base font-semibold mb-2">3. Results</h2>
        <table class="w-full text-sm border border-slate-100 rounded-md">
          <thead class="text-left text-xs text-slate-500 bg-slate-25">
            <tr>
              <th class="px-3 py-2 first:!pl-4 last:!pr-4">Sub ID</th>
              <th class="px-3 py-2 first:!pl-4 last:!pr-4">Type</th>
              <th class="px-3 py-2 first:!pl-4 last:!pr-4">Device</th>
              <th class="px-3 py-2 first:!pl-4 last:!pr-4">Push token</th>
              <th class="px-3 py-2 first:!pl-4 last:!pr-4">Status</th>
              <th class="px-3 py-2 first:!pl-4 last:!pr-4">Details</th>
            </tr>
          </thead>
          <tbody>
            <% @results.each do |r| %>
              <tr class="border-t border-slate-100 align-top">
                <td class="px-3 py-2 first:!pl-4 last:!pr-4"><%= r[:id] %></td>
                <td class="px-3 py-2 first:!pl-4 last:!pr-4"><%= r[:type] %></td>
                <td class="px-3 py-2 first:!pl-4 last:!pr-4 font-mono text-xs break-all"><%= r[:device] %></td>
                <td class="px-3 py-2 first:!pl-4 last:!pr-4 font-mono text-xs break-all"><%= r[:token_tail] %></td>
                <td class="px-3 py-2 first:!pl-4 last:!pr-4">
                  <%
                    color = {
                      success: 'bg-green-100 text-green-800',
                      failure: 'bg-red-100 text-red-800',
                      skipped: 'bg-slate-100 text-slate-600'
                    }[r[:status]]
                  %>
                  <span class="px-2 py-0.5 rounded-full text-xs <%= color %>"><%= r[:status] %></span>
                </td>
                <td class="px-3 py-2 first:!pl-4 last:!pr-4 font-mono text-xs break-all whitespace-pre-wrap"><%= r[:message] %></td>
              </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    <% end %>
  <% end %>
</section>

<% content_for :javascript do %>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const toggle = document.getElementById('toggle-all');
      if (!toggle) return;
      toggle.addEventListener('change', (event) => {
        document.querySelectorAll('.subscription-checkbox').forEach((cb) => {
          cb.checked = event.target.checked;
        });
      });
    });
  </script>
<% end %>