`public/panels/send-times.html`

65 lines
<div id="st-banner"></div>

<div class="card">
  <div class="row" style="justify-content:space-between;align-items:baseline;gap:12px">
    <div>
      <h2>Send-Time Optimization</h2>
      <div class="muted" style="font-size:12px">
        Mines historical email-open timestamps to find the best day×hour window per
        audience. Read-only analysis — does not trigger a send.
      </div>
    </div>
    <div class="row" style="gap:8px;align-items:center">
      <label for="st-segment" style="margin:0">Audience</label>
      <select id="st-segment" style="min-width:260px;width:auto"></select>
      <button class="btn ghost" id="st-refresh" style="padding:6px 12px;font-size:12.5px">Refresh</button>
    </div>
  </div>
</div>

<div class="grid" style="grid-template-columns:1fr 320px;align-items:start">

  <!-- heatmap -->
  <div class="card" id="st-heatmap-card">
    <div class="row" style="justify-content:space-between;align-items:baseline">
      <div>
        <h2 id="st-heatmap-title">Open heatmap · day × hour</h2>
        <div class="muted" id="st-heatmap-sub" style="font-size:12px">Loading…</div>
      </div>
      <span class="pill" id="st-total">—</span>
    </div>
    <div id="st-heatmap" class="loading" style="margin-top:14px">Loading heatmap…</div>
    <div class="muted" style="font-size:11px;margin-top:8px">
      Each cell counts opens by weekday × hour-of-day (UTC). Darker = more opens.
    </div>
  </div>

  <!-- recommendation panel -->
  <div class="card" id="st-rec-card">
    <h2>Recommended window</h2>
    <div class="muted" style="font-size:12px">Best send slot for this audience</div>
    <div id="st-rec" class="loading" style="margin-top:12px">Loading…</div>

    <div style="margin-top:14px">
      <label>Best hour per weekday</label>
      <div id="st-perday" class="muted">—</div>
    </div>
  </div>

</div>

<!-- per-contact table -->
<div class="card">
  <div class="row" style="justify-content:space-between;align-items:baseline">
    <div>
      <h2>Per-contact predicted peak</h2>
      <div class="muted" style="font-size:12px">
        Each contact's modal open window across their history. High-confidence
        rows first (≥35% of opens land in the peak cell).
      </div>
    </div>
    <span class="pill" id="st-contact-count">—</span>
  </div>
  <div id="st-contacts" class="loading" style="margin-top:14px">Loading contacts…</div>
</div>