`public/panels/segments.html`

69 lines
<div id="seg-banner"></div>

<!-- RFM auto-segmentation: computed from email engagement -->
<div class="card" id="seg-rfm-card">
  <div class="row" style="justify-content:space-between;align-items:baseline;gap:12px">
    <div>
      <h2>RFM auto-segments</h2>
      <div class="muted" style="font-size:12px">
        Recency (last open) · Frequency (open count) · Monetary proxy (clicks).
        Every contact lands in one bucket — totals reconcile to the pool.
      </div>
    </div>
    <div class="row" style="gap:6px;align-items:center">
      <span class="pill" id="seg-rfm-total">—</span>
      <button class="btn ghost" id="seg-rfm-refresh" style="padding:6px 12px;font-size:12.5px">Refresh</button>
    </div>
  </div>
  <div class="muted" id="seg-rfm-summary" style="font-size:12px;margin-top:6px"></div>
  <div id="seg-rfm-grid" class="loading" style="margin-top:12px">Loading RFM…</div>
</div>

<div class="grid" style="grid-template-columns:minmax(280px,360px) 1fr;align-items:start">

  <!-- Left: saved segments -->
  <div class="card" id="seg-list-card">
    <h2>Saved segments</h2>
    <div class="muted" style="font-size:12px">Reusable audiences · estimated size</div>
    <div id="seg-list" class="loading" style="margin-top:12px">Loading…</div>
    <div class="row" style="margin-top:14px">
      <button class="btn ghost" id="seg-new">+ New segment</button>
    </div>
  </div>

  <!-- Right: rule builder + preview -->
  <div class="card" id="seg-builder-card">
    <h2 id="seg-builder-title">Build a segment</h2>
    <div class="muted" style="font-size:12px">A segment is a set of rules over contact fields, matched with AND.</div>

    <div class="grid" style="margin-top:14px;grid-template-columns:1fr 1fr">
      <div>
        <label for="seg-name">Segment name</label>
        <input id="seg-name" placeholder="Trade &amp; Designers — engaged">
      </div>
      <div>
        <label for="seg-desc">Description</label>
        <input id="seg-desc" placeholder="Short note on who this audience is">
      </div>
    </div>

    <div style="margin-top:16px">
      <label>Rules</label>
      <div id="seg-rules"></div>
      <div class="row" style="margin-top:8px">
        <button class="btn ghost" id="seg-add-rule">+ Add rule</button>
      </div>
    </div>

    <div class="row" style="margin-top:16px;align-items:center">
      <button class="btn gold" id="seg-preview">Preview audience</button>
      <button class="btn" id="seg-save">Save segment</button>
      <span class="pill" id="seg-editing" style="display:none"></span>
      <span class="muted" id="seg-msg" style="font-size:12.5px"></span>
    </div>

    <div id="seg-preview-body" style="margin-top:16px"></div>
  </div>

</div>