`views/admin/live.ejs`

43 lines
<%- include('../partials/head', { title, meta_desc }) %>
<%- include('../partials/header') %>

<main class="container" style="max-width: 1100px; padding: 24px;">

  <p style="margin-bottom: 8px;"><a href="/admin">← Admin</a></p>
  <h1 style="margin: 0 0 6px;">Live calls</h1>
  <p class="muted" style="margin: 0 0 16px;"><strong id="live-count"><%= active.length %></strong> active · auto-refresh every 5s</p>

  <div id="live-grid" style="display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:16px;">
    <% if (active.length === 0) { %>
      <div class="muted" style="grid-column:1/-1; padding:48px; text-align:center; border:1px dashed var(--line); border-radius:10px;">No active calls. Place one from <a href="/new">the wizard</a> or <a href="/admin/contacts">contacts</a>.</div>
    <% } %>
    <% for (const c of active) { %>
    <div style="padding:18px; border:1px solid var(--line); border-radius:10px; background:var(--panel);">
      <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:8px;">
        <div>
          <strong><%= c.business_name %></strong>
          <div class="muted" style="font-size:11px;"><%= c.business_phone %></div>
        </div>
        <span style="padding:2px 10px; border-radius:12px; font-size:11px; background:#fef3c7; color:#92400e; animation:pulse 1.5s infinite;"><%= c.status %></span>
      </div>
      <p style="font-size:13px; margin:8px 0;"><span class="muted"><%= (c.goal||'').slice(0,140) %></span></p>
      <div style="display:flex; gap:8px; margin-top:12px;">
        <a href="/listen/<%= c.id %>" style="flex:1; padding:8px 14px; background:#dbeafe; border:1px solid #2563eb; color:#1e3a8a; border-radius:6px; text-decoration:none; text-align:center; font-weight:600;">🎩 Listen + Take over</a>
      </div>
    </div>
    <% } %>
  </div>

  <style>
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
  </style>

  <script>
  // Auto-refresh active list every 5s
  setInterval(() => location.reload(), 5000);
  </script>

</main>

<%- include('../partials/footer') %>