`public/panels/journeys.html`

54 lines
<div id="journeys-banner"></div>

<div class="card">
  <div class="row" style="justify-content:space-between;align-items:baseline;gap:12px">
    <div>
      <h2>Cross-Channel Journeys</h2>
      <div class="muted" style="font-size:12px">
        Plan a multi-step journey across email, SMS, social, and retargeting for one segment.
        Add steps, set conditions, and review the recommended cross-channel ladder.
        <b>PLANNING ONLY</b> — nothing here triggers a live send.
      </div>
    </div>
    <span class="pill" id="journeys-count">0 journeys</span>
  </div>
</div>

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

  <!-- Left rail: journey list + new -->
  <div>
    <div class="card">
      <div class="row" style="justify-content:space-between;align-items:baseline">
        <h2 style="margin:0;font-size:15px">Journeys</h2>
        <button class="btn ghost" id="journeys-new" style="padding:5px 11px;font-size:12.5px">+ New</button>
      </div>
      <div id="journeys-list" class="loading" style="margin-top:10px">Loading…</div>
    </div>
  </div>

  <!-- Right pane: editor / recommendations / dry-run -->
  <div>
    <div class="card" id="journeys-editor-card" style="display:none">
      <div id="journeys-editor"></div>
    </div>

    <div class="card" id="journeys-recs-card" style="display:none">
      <div class="row" style="justify-content:space-between;align-items:baseline">
        <h2 style="margin:0;font-size:15px">Recommended next steps</h2>
        <span class="pill" style="background:var(--cream)">cross-channel ladder</span>
      </div>
      <div id="journeys-recs" style="margin-top:10px"></div>
    </div>

    <div class="card" id="journeys-run-card" style="display:none">
      <div class="row" style="justify-content:space-between;align-items:baseline">
        <h2 style="margin:0;font-size:15px">Dry-run simulation</h2>
        <span class="pill" style="background:#fff0e6;color:var(--accent)">no sends · planning only</span>
      </div>
      <div id="journeys-run" style="margin-top:10px"></div>
    </div>
  </div>

</div>