`public/panels/playbook.html`

78 lines
<div id="pb-banner"></div>

<div class="card">
  <div class="row" style="justify-content:space-between;align-items:baseline;gap:12px">
    <div>
      <h2>Monthly Playbook</h2>
      <div class="muted" style="font-size:12px">
        A 4-week marketing plan synthesised from the calendar, segment health, and recent performance gaps.
        <b>SUGGESTIONS ONLY</b> — nothing here sends or schedules. Promote an entry to the Calendar to make it real.
      </div>
    </div>
    <div class="row" style="gap:8px;align-items:center">
      <span class="pill" id="pb-mode-pill">—</span>
      <span class="pill" id="pb-month-pill">—</span>
    </div>
  </div>
</div>

<div class="grid" style="grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px">
  <div class="card" style="margin:0;padding:14px 16px">
    <div class="muted" style="font-size:11px;text-transform:uppercase;letter-spacing:.6px">Entries</div>
    <div id="pb-stat-count" style="font:600 22px/1.2 'Cormorant Garamond',Georgia,serif;margin-top:4px">—</div>
  </div>
  <div class="card" style="margin:0;padding:14px 16px">
    <div class="muted" style="font-size:11px;text-transform:uppercase;letter-spacing:.6px">Calendar moments</div>
    <div id="pb-stat-calendar" style="font:600 22px/1.2 'Cormorant Garamond',Georgia,serif;margin-top:4px;color:var(--gold)">—</div>
  </div>
  <div class="card" style="margin:0;padding:14px 16px">
    <div class="muted" style="font-size:11px;text-transform:uppercase;letter-spacing:.6px">Performance gaps</div>
    <div id="pb-stat-gaps" style="font:600 22px/1.2 'Cormorant Garamond',Georgia,serif;margin-top:4px;color:var(--accent)">—</div>
  </div>
  <div class="card" style="margin:0;padding:14px 16px">
    <div class="muted" style="font-size:11px;text-transform:uppercase;letter-spacing:.6px">Healthy segments</div>
    <div id="pb-stat-healthy" style="font:600 22px/1.2 'Cormorant Garamond',Georgia,serif;margin-top:4px;color:var(--sage)">—</div>
  </div>
</div>

<div class="card">
  <div class="row" style="justify-content:space-between;align-items:baseline;gap:12px">
    <div>
      <h2 style="margin:0">Playbook</h2>
      <div class="muted" style="font-size:12px" id="pb-gen-meta">—</div>
    </div>
    <div class="row" style="gap:8px;align-items:center">
      <label style="margin:0;align-self:center">Month</label>
      <input type="month" id="pb-month" style="width:auto;min-width:160px" />
      <button class="btn ghost" id="pb-regen" style="padding:7px 12px;font-size:12.5px">↻ Regenerate</button>
      <button class="btn" id="pb-add" style="padding:7px 12px;font-size:12.5px">+ Add entry</button>
    </div>
  </div>
  <div id="pb-list" class="loading" style="margin-top:12px">Loading…</div>
</div>

<div class="grid" style="grid-template-columns:1fr 1fr;align-items:start">
  <div class="card">
    <div class="row" style="justify-content:space-between;align-items:baseline">
      <h2 style="margin:0">Signals — Calendar window</h2>
      <span class="pill" style="background:var(--cream)">curated</span>
    </div>
    <div id="pb-signals-cal" class="loading" style="margin-top:10px">Loading…</div>
  </div>
  <div class="card">
    <div class="row" style="justify-content:space-between;align-items:baseline">
      <h2 style="margin:0">Signals — Segment health</h2>
      <span class="pill" style="background:#fff0e6;color:var(--accent)">last 30d</span>
    </div>
    <div id="pb-signals-seg" class="loading" style="margin-top:10px">Loading…</div>
  </div>
</div>

<div class="card" id="pb-edit-card" style="display:none">
  <div class="row" style="justify-content:space-between;align-items:baseline">
    <h2 style="margin:0" id="pb-edit-title">Edit entry</h2>
    <button class="btn ghost" id="pb-edit-close" style="padding:5px 10px;font-size:12px">✕ Close</button>
  </div>
  <div id="pb-edit" style="margin-top:12px"></div>
</div>